html5/spec-preview 2dcontext.html,NONE,1.1 Overview.html,NONE,1.1 acknowledgements.html,NONE,1.1 association-of-controls-and-forms.html,NONE,1.1 attributes-common-to-form-controls.html,NONE,1.1 attributes-common-to-ins-and-del-elements.html,NONE,1.1 attributes-common-to-td-and-th-elements.html,NONE,1.1 browsers.html,NONE,1.1 commands.html,NONE,1.1 common-dom-interfaces.html,NONE,1.1 common-input-element-apis.html,NONE,1.1 common-input-element-attributes.html,NONE,1.1 common-microsyntaxes.html,NONE,1.1 constraints.html,NONE,1.1 content-models.html,NONE,1.1 converting-html-to-other-formats.html,NONE,1.1 dimension-attributes.html,NONE,1.1 dnd.html,NONE,1.1 dom.html,NONE,1.1 dynamic-markup-insertion.html,NONE,1.1 editing-apis.html,NONE,1.1 editing.html,NONE,1.1 edits-and-lists.html,NONE,1.1 edits-and-paragraphs.html,NONE,1.1 edits.html,NONE,1.1 element-definitions.html,NONE,1.1 elements.html,NONE,1.1 examples.html,NONE,1.1 form-submission.html,NONE,1.1 forms.html,NONE,1.1 fragment-links.js,NONE,1.1 glo

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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6 Text-level semantics</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-em-element.html">4.6.2 The em element &#8594;</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>&lt;nav&gt;
 &lt;ul&gt;
  &lt;li&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/news"&gt;News&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a&gt;Examples&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/legal"&gt;Legal&lt;/a&gt; &lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</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>&lt;aside class="advertising"&gt;
 &lt;h1&gt;Advertising&lt;/h1&gt;
 &lt;a href="http://ad.example.com/?adid=1929&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;Mellblomatic 9000!&lt;/h1&gt;
   &lt;p&gt;Turn all your widgets into mellbloms!&lt;/p&gt;
   &lt;p&gt;Only $9.99 plus shipping and handling.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
 &lt;a href="http://ad.example.com/?adid=375&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;The Mellblom Browser&lt;/h1&gt;
   &lt;p&gt;Web browsing at the speed of light.&lt;/p&gt;
   &lt;p&gt;No other browser goes faster!&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
&lt;/aside&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212;
   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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.7.1 The ins element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="attributes-common-to-ins-and-del-elements.html">4.7.3 Attributes common to ins and del elements &#8594;</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>&lt;h1&gt;To Do&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;Empty the dishwasher&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-11T01:25-07:00"&gt;Watch Walter Lewin's lectures&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-10T23:38-07:00"&gt;Download more tracks&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Buy a printer&lt;/li&gt;
&lt;/ul&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.10.11 The optgroup element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-textarea-element.html">4.10.13 The textarea element &#8594;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5.11 The figure element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-div-element.html">4.5.13 The div element &#8594;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5.1 The p element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-pre-element.html">4.5.3 The pre element &#8594;</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>&lt;section&gt;
 &lt;h1&gt;Communication&lt;/h1&gt;
 &lt;p&gt;There are various methods of communication. This section
 covers a few of the important ones used by the project.&lt;/p&gt;
 <strong><a href="#the-hr-element">&lt;hr&gt;</a></strong>
 &lt;p&gt;Communication stones seem to come in pairs and have mysterious
 properties:&lt;/p&gt;
 &lt;ul&gt;
  &lt;li&gt;They can transfer thoughts in two directions once activated
  if used alone.&lt;/li&gt;
  &lt;li&gt;If used with another device, they can transfer one's
  consciousness to another body.&lt;/li&gt;
  &lt;li&gt;If both stones are used with another device, the
  consciousnesses switch bodies.&lt;/li&gt;
 &lt;/ul&gt;
 <strong><a href="#the-hr-element">&lt;hr&gt;</a></strong>
 &lt;p&gt;Radios use the electromagnetic spectrum in the meter range and
 longer.&lt;/p&gt;
 <strong><a href="#the-hr-element">&lt;hr&gt;</a></strong>
 &lt;p&gt;Signal flares use the electromagnetic spectrum in the
 nanometer range.&lt;/p&gt;
&lt;/section&gt;
&lt;section&gt;
 &lt;h1&gt;Food&lt;/h1&gt;
 &lt;p&gt;All food at the project is rationed:&lt;/p&gt;
 &lt;dl&gt;
  &lt;dt&gt;Potatoes&lt;/dt&gt;
  &lt;dd&gt;Two per day&lt;/dd&gt;
  &lt;dt&gt;Soup&lt;/dt&gt;
  &lt;dd&gt;One bowl per day&lt;/dd&gt;
 &lt;/dl&gt;
 <strong><a href="#the-hr-element">&lt;hr&gt;</a></strong>
 &lt;p&gt;Cooking is done by the chefs on a set rotation.&lt;/p&gt;
&lt;/section&gt;</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">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Maybe it won't be that bad&lt;/i&gt;, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.&lt;/p&gt;
<strong><a href="#the-hr-element">&lt;hr&gt;</a></strong>
&lt;p&gt;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.&lt;/p&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.11.1 The details element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-command-element.html">4.11.3 The command element &#8594;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.3 The strong element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-s-element.html">4.6.5 The s element &#8594;</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">&lt;dl&gt;
 &lt;dt&gt;Single room
 &lt;dd&gt;199 &#8364; &lt;small&gt;breakfast included, VAT not included&lt;/small&gt;
 &lt;dt&gt;Double room
 &lt;dd&gt;239 &#8364; &lt;small&gt;breakfast included, VAT not included&lt;/small&gt;
&lt;/dl&gt;</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>&lt;p&gt;Example Corp today announced record profits for the
second quarter &lt;small&gt;(Full Disclosure: Foo News is a subsidiary of
Example Corp)&lt;/small&gt;, leading to speculation about a third quarter
merger with Demo Group.&lt;/p&gt;</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>&lt;aside&gt;
 &lt;h1&gt;Example Corp&lt;/h1&gt;
 &lt;p&gt;This company mostly creates small software and Web
 sites.&lt;/p&gt;
 &lt;p&gt;The Example Corp company mission is "To provide entertainment
 and news on a sample basis".&lt;/p&gt;
 &lt;p&gt;&lt;small&gt;Information obtained from &lt;a
 href="http://example.com/about.html"&gt;example.com&lt;/a&gt; home
 page.&lt;/small&gt;&lt;/p&gt;
&lt;/aside&gt;</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>&lt;p&gt;&lt;strong&gt;&lt;small&gt;Continued use of this service will result in a kiss.&lt;/small&gt;&lt;/strong&gt;&lt;/p&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.13 The samp element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-sub-and-sup-elements.html">4.6.15 The sub and sup elements &#8594;</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>&lt;p&gt;To make George eat an apple, press &lt;kbd&gt;&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;F3&lt;/kbd&gt;&lt;/kbd&gt;&lt;/p&gt;</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>&lt;p&gt;To make George eat an apple, select
    &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;File&lt;/samp&gt;&lt;/kbd&gt;|&lt;kbd&gt;&lt;samp&gt;Eat Apple...&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;
&lt;/p&gt;</pre>

   <p>Such precision isn't necessary; the following is equally fine:</p>

   <pre>&lt;p&gt;To make George eat an apple, select &lt;kbd&gt;File | Eat Apple...&lt;/kbd&gt;&lt;/p&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.24 The bdo element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-br-element.html">4.6.26 The br element &#8594;</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>&lt;pre&gt;&lt;code class="lang-c"&gt;&lt;span class="keyword"&gt;for&lt;/span&gt; (&lt;span class="ident"&gt;j&lt;/span&gt; = 0; &lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt; 256; &lt;span class="ident"&gt;j&lt;/span&gt;++) {
  &lt;span class="ident"&gt;i_t3&lt;/span&gt; = (&lt;span class="ident"&gt;i_t3&lt;/span&gt; &amp; 0x1ffff) | (&lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt;&amp;lt; 17);
  &lt;span class="ident"&gt;i_t6&lt;/span&gt; = (((((((&lt;span class="ident"&gt;i_t3&lt;/span&gt; &gt;&gt; 3) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 1) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 8) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 5) &amp; 0xff;
  &lt;span class="keyword"&gt;if&lt;/span&gt; (&lt;span class="ident"&gt;i_t6&lt;/span&gt; == &lt;span class="ident"&gt;i_t1&lt;/span&gt;)
    &lt;span class="keyword"&gt;break&lt;/span&gt;;
}&lt;/code&gt;&lt;/pre&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.10.3 The form element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-legend-element.html">4.10.5 The legend element &#8594;</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>&lt;fieldset&gt;
 &lt;legend&gt;Display&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;&lt;input type=radio name=c value=0 checked&gt; Black on White&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;&lt;input type=radio name=c value=1&gt; White on Black&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=g&gt; Use grayscale&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;Enhance contrast &lt;input type=range name=e list=contrast min=0 max=100 value=0 step=1&gt;&lt;/label&gt;
 &lt;datalist id=contrast&gt;
  &lt;option label=Normal value=0&gt;
  &lt;option label=Maximum value=100&gt;
 &lt;/datalist&gt;
&lt;/fieldset&gt;</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>&lt;fieldset name="clubfields" disabled&gt;
 &lt;legend&gt; &lt;label&gt;
  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
  Use Club Card
 &lt;/label&gt; &lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Expiry date: &lt;input name=clubexp type=month&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</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>&lt;fieldset name="clubfields" disabled&gt;
 &lt;legend&gt; &lt;label&gt;
  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
  Use Club Card
 &lt;/label&gt; &lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset name="numfields"&gt;
  &lt;legend&gt; &lt;label&gt;
   &lt;input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"&gt;
   My card has numbers on it
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset name="letfields" disabled&gt;
  &lt;legend&gt; &lt;label&gt;
   &lt;input type=radio name=clubtype onchange="form.letfields.disabled = !checked"&gt;
   My card has letters on it
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Card code: &lt;input name=clublet required pattern="[A-Za-z]+"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
&lt;/fieldset&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5.10 The dd element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-figcaption-element.html">4.5.12 The figcaption element &#8594;</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>&lt;p&gt;In &lt;a href="#l4"&gt;listing 4&lt;/a&gt; we see the primary core interface
API declaration.&lt;/p&gt;
&lt;figure id="l4"&gt;
 &lt;figcaption&gt;Listing 4. The primary core interface API declaration.&lt;/figcaption&gt;
 &lt;pre&gt;&lt;code&gt;interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&amp;lt;byte&gt; data);
 void initSelfDestruct();
}&lt;/code&gt;&lt;/pre&gt;
&lt;/figure&gt;
&lt;p&gt;The API is designed to use UTF-8.&lt;/p&gt;</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>&lt;figure&gt;
 &lt;img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently."&gt;
 &lt;figcaption&gt;Bubbles at work&lt;/figcaption&gt;
&lt;/figure&gt;</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>&lt;h2&gt;Malinko's comics&lt;/h2&gt;

&lt;p&gt;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:

&lt;blockquote&gt;
 &lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"&gt;
&lt;/blockquote&gt;

&lt;p&gt;...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.

&lt;figure&gt;
 &lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."&gt;
 &lt;figcaption&gt;Exhibit A. The alleged &lt;cite&gt;rough copy&lt;/cite&gt; comic.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
 &lt;video src="ex-b.mov"&gt;&lt;/video&gt;
 &lt;figcaption&gt;Exhibit B. The &lt;cite&gt;Rough Copy&lt;/cite&gt; trailer.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;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>&lt;figure&gt;
 &lt;p&gt;'Twas brillig, and the slithy toves&lt;br&gt;
 Did gyre and gimble in the wabe;&lt;br&gt;
 All mimsy were the borogoves,&lt;br&gt;
 And the mome raths outgrabe.&lt;/p&gt;
 &lt;figcaption&gt;&lt;cite&gt;Jabberwocky&lt;/cite&gt; (first verse). Lewis Carroll, 1832-98&lt;/figcaption&gt;
&lt;/figure&gt;</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>&lt;figure&gt;
 &lt;figcaption&gt;The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/figcaption&gt;
 &lt;figure&gt;
  &lt;figcaption&gt;Etching. Anonymous, ca. 1423.&lt;/figcaption&gt;
  &lt;img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it."&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
  &lt;figcaption&gt;Oil-based paint on canvas. Maria Towle, 1858.&lt;/figcaption&gt;
  &lt;img src="castle1858.jpeg" alt="The castle now has two towers and two walls."&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
  &lt;figcaption&gt;Film photograph. Peter Jankle, 1999.&lt;/figcaption&gt;
  &lt;img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece."&gt;
 &lt;/figure&gt;
&lt;/figure&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5 Grouping content</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-hr-element.html">4.5.2 The hr element &#8594;</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 (&#182;).</p>

  <div class="example">
   <p>The following examples are conforming HTML fragments:</p>
   <pre>&lt;p&gt;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.&lt;/p&gt;</pre>
   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Personal information&lt;/legend&gt;
 &lt;p&gt;
   &lt;label&gt;Name: &lt;input name="n"&gt;&lt;/label&gt;
   &lt;label&gt;&lt;input name="anon" type="checkbox"&gt; Hide from other users&lt;/label&gt;
 &lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;textarea name="a"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>
   <pre>&lt;p&gt;There was once an example from Femley,&lt;br&gt;
Whose markup was of dubious quality.&lt;br&gt;
The validator complained,&lt;br&gt;
So the author was pained,&lt;br&gt;
To move the error from the markup to the rhyming.&lt;/p&gt;</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>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
 &lt;p&gt;Author: fred@example.com&lt;/p&gt;
&lt;/section&gt;</pre>

   <p>However, it would be better marked-up as:</p>

<pre>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;footer&gt;Last modified: 2001-04-23&lt;/footer&gt;
 &lt;address&gt;Author: fred@example.com&lt;/address&gt;
&lt;/section&gt;</pre>

   <p>Or:</p>

<pre>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;footer&gt;
  &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
  &lt;address&gt;Author: fred@example.com&lt;/address&gt;
 &lt;/footer&gt;
&lt;/section&gt;</pre>

  </div>

  <div class="note">

   <p>List elements (in particular, <code><a href="the-ol-element.html#the-ol-element">ol</a></code> and
   <code><a href="the-ul-element.html#the-ul-element">ul</a></code> elements) cannot be children of <code><a href="#the-p-element">p</a></code>
   elements. When a sentence contains a bulleted list, therefore, one
   might wonder how it should be marked up.</p>

   <div class="example">
    <p>For instance, this fantastic sentence has bullets relating to</p>
    <ul><li>wizards,
     </li><li>faster-than-light travel, and
     </li><li>telepathy,
    </li></ul><p>and is further discussed below.</p>
   </div>

   <p>The solution is to realise that a <i><a href="content-models.html#paragraph">paragraph</a></i>, in HTML
   terms, is not a logical concept, but a structural one. In the
   fantastic example above, there are actually <em>five</em> <a href="content-models.html#paragraph" title="paragraph">paragraphs</a> as defined by this
   speciication: one before the list, one for each bullet, and one
   after the list.</p>

   <div class="example">

    <p>The markup for the above example could therefore be:</p>

    <pre>&lt;p&gt;For instance, this fantastic sentence has bullets relating to&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;wizards,
 &lt;li&gt;faster-than-light travel, and
 &lt;li&gt;telepathy,
&lt;/ul&gt;
&lt;p&gt;and is further discussed below.&lt;/p&gt;</pre>

   </div>

   <p>Authors wishing to conveniently style such "logical" paragraphs
   consisting of multiple "structural" paragraphs can use the
   <code><a href="the-div-element.html#the-div-element">div</a></code> element instead of the <code><a href="#the-p-element">p</a></code> element.</p>

   <div class="example">

    <p>Thus for instance the above example could become the following:</p>

    <pre>&lt;div&gt;For instance, this fantastic sentence has bullets relating to
&lt;ul&gt;
 &lt;li&gt;wizards,
 &lt;li&gt;faster-than-light travel, and
 &lt;li&gt;telepathy,
&lt;/ul&gt;
and is further discussed below.&lt;/div&gt;</pre>

    <p>This example still has five structural paragraphs, but now the
    author can style just the <code><a href="the-div-element.html#the-div-element">div</a></code> instead of having to
    consider each part of the example separately.</p>

   </div>

  </div>



  </body></html>
--- NEW FILE: examples.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.13 Examples &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="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">&#8592; 4.9.11 Attributes common to td and th elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="forms.html">4.10 Forms &#8594;</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>&lt;table&gt;
 &lt;caption&gt;Specification values: &lt;b&gt;Steel&lt;/b&gt;, &lt;b&gt;Castings&lt;/b&gt;,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th rowspan=2&gt;Grade.&lt;/th&gt;
   &lt;th rowspan=2&gt;Yield Point.&lt;/th&gt;
   &lt;th colspan=2&gt;Ultimate tensile strength&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent elong. 50.8mm or 2 in.&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent reduct. area.&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th&gt;kg/mm&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
   &lt;th&gt;lb/in&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Hard&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;56.2&lt;/td&gt;
   &lt;td&gt;80,000&lt;/td&gt;
   &lt;td&gt;15&lt;/td&gt;
   &lt;td&gt;20&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Medium&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;49.2&lt;/td&gt;
   &lt;td&gt;70,000&lt;/td&gt;
   &lt;td&gt;18&lt;/td&gt;
   &lt;td&gt;25&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Soft&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;42.2&lt;/td&gt;
   &lt;td&gt;60,000&lt;/td&gt;
   &lt;td&gt;22&lt;/td&gt;
   &lt;td&gt;30&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</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&#160;mm or&#160;2&#160;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>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;
   &lt;th&gt;2008
   &lt;th&gt;2007
   &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Net sales
   &lt;td&gt;$ 32,479
   &lt;td&gt;$ 24,006
   &lt;td&gt;$ 19,315
  &lt;tr&gt;
   &lt;th&gt;Cost of sales
   &lt;td&gt;  21,334
   &lt;td&gt;  15,852
   &lt;td&gt;  13,717
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin
   &lt;td&gt;$ 11,145
   &lt;td&gt;$  8,154
   &lt;td&gt;$  5,598
 &lt;tfoot&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin percentage
   &lt;td&gt;34.3%
   &lt;td&gt;34.0%
   &lt;td&gt;29.0%
&lt;/table&gt;</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>&lt;table&gt;
 &lt;colgroup&gt; &lt;col&gt;
 &lt;colgroup&gt; &lt;col&gt; &lt;col&gt; &lt;col&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; &lt;th&gt;2008 &lt;th&gt;2007 &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Research and development
       &lt;td&gt; $ 1,109 &lt;td&gt; $ 782 &lt;td&gt; $ 712
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 3.4% &lt;td&gt; 3.3% &lt;td&gt; 3.7%
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Selling, general, and administrative
       &lt;td&gt; $ 3,761 &lt;td&gt; $ 2,963 &lt;td&gt; $ 2,433
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 11.6% &lt;td&gt; 12.3% &lt;td&gt; 12.6%
&lt;/table&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.8.11 The canvas element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-area-element.html">4.8.13 The area element &#8594;</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>&lt;!DOCTYPE HTML&gt;
&lt;TITLE&gt;Babies&#8482;: Toys&lt;/TITLE&gt;
&lt;HEADER&gt;
 &lt;H1&gt;Toys&lt;/H1&gt;
 &lt;IMG SRC="/images/menu.gif"
      ALT="Babies&#8482; navigation menu. Select a department to go to its page."
      USEMAP="#NAV"&gt;
&lt;/HEADER&gt;
 ...
&lt;FOOTER&gt;
 &lt;MAP NAME="NAV"&gt;
  &lt;P&gt;
   &lt;A HREF="/clothes/"&gt;Clothes&lt;/A&gt;
   &lt;AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"&gt; |
   &lt;A HREF="/toys/"&gt;Toys&lt;/A&gt;
   &lt;AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"&gt; |
   &lt;A HREF="/food/"&gt;Food&lt;/A&gt;
   &lt;AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"&gt; |
   &lt;A HREF="/books/"&gt;Books&lt;/A&gt;
   &lt;AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/"&gt;
 &lt;/MAP&gt;
&lt;/FOOTER&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.1.1 The html element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-title-element.html">4.2.2 The title element &#8594;</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>&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;A document with a short head&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 ...</pre>

   <p>Here is an example of a longer one:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
 &lt;HEAD&gt;
  &lt;META CHARSET="UTF-8"&gt;
  &lt;BASE HREF="http://www.example.com/"&gt;
  &lt;TITLE&gt;An application with a long head&lt;/TITLE&gt;
  &lt;LINK REL="STYLESHEET" HREF="default.css"&gt;
  &lt;LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"&gt;
  &lt;SCRIPT SRC="support.js"&gt;&lt;/SCRIPT&gt;
  &lt;META NAME="APPLICATION-NAME" CONTENT="Long headed application"&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 ...</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.4 The small element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-cite-element.html">4.6.6 The cite element &#8594;</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>&lt;p&gt;Buy our Iced Tea and Lemonade!&lt;/p&gt;
&lt;p&gt;&lt;s&gt;Recommended retail price: $3.99 per bottle&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Now selling for just $2.99 a bottle!&lt;/strong&gt;&lt;/p&gt;</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':'rls','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-bgcoor':'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-eleent-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-lis-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','ssigned-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-proerty-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-nmed-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-attribte','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':'he-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':'webapapis','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','om-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','sntax-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-definitios':'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-optgrouplabel':'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':'do','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-keyge-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':'mediaelements','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','appliation/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','i-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','oncept-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-detecion':'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-onstraints':'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':'fors','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-andvideotracklist-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-capabilties','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':'te-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-interfaes','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','negtive-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-novalidae':'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-exttrackcuelist-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','conept-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','nesteParsing':'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-elemnts','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-caabilities':'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-event':'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':'toenization','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-obect-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-comand-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-appcahe':'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-prelad-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-oject-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-heigt':'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':'gloal-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-tolbars':'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-docment-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-rowsing-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-elment','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':'eiting','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-stae':'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':'theimg-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':'histoy','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','vent-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','resetBCNam':'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':'thetable-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','attrdropzone-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','restrictios-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-elemets','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-elments','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':'infrastructue','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-min-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':'nfrastructure','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=numbr)':'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','domvaliditystate-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':'histor','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-elemnt','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':'contraints','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-tsks':'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':'lnks','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-ype':'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':'headngs-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-atapagesize':'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-cte':'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)':'globalattributes','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':'infrasructure','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-lement','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-iput-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','dra-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','mutipart/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':'histoy','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-element','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','pare-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':'he-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':'bsolete','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-stae':'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-lgend-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--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','atr-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-fo':'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','acknowledgement':'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':'commondom-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','browsng-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-patter-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','conenteditable':'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-scrip-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-mediaontroller-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-elemens','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':'obsolte','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':'webappais','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','mediaresource-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','hanler-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','atr-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-onchnge':'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-stae-(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','sectionig-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-indces':'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-ommandtype':'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-im-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':'meda-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-tokns':'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-browsin-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-scrip-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-relaing-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-typeattribute','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-elemnts','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':'browsrs','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':'ifrastructure','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','om-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-ifram-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':'obsolee','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':'obsoete','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-mdiacontroller-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-commn-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-om-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-trak':'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-element','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':'te-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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.4.1 The body element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-nav-element.html">4.4.3 The nav element &#8594;</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>&lt;article&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;h2&gt;Tasty, delicious fruit!&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Red Delicious&lt;/h1&gt;
  &lt;p&gt;These bright red apples are the most common found in many
  supermarkets.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Granny Smith&lt;/h1&gt;
  &lt;p&gt;These juicy, green apples make a great filling for
  apple pies.&lt;/p&gt;
 &lt;/section&gt;
&lt;/article&gt;</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>&lt;!DOCTYPE Html&gt;
&lt;Html
 &gt;&lt;Head
   &gt;&lt;Title
     &gt;Graduation Ceremony Summer 2022&lt;/Title
   &gt;&lt;/Head
 &gt;&lt;Body
   &gt;&lt;H1
     &gt;Graduation&lt;/H1
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Ceremony&lt;/H1
     &gt;&lt;P
       &gt;Opening Procession&lt;/P
     &gt;&lt;P
       &gt;Speech by Validactorian&lt;/P
     &gt;&lt;P
       &gt;Speech by Class President&lt;/P
     &gt;&lt;P
       &gt;Presentation of Diplomas&lt;/P
     &gt;&lt;P
       &gt;Closing Speech by Headmaster&lt;/P
   &gt;&lt;/Section
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Graduates&lt;/H1
     &gt;&lt;Ul
       &gt;&lt;Li
         &gt;Molly Carpenter&lt;/Li
       &gt;&lt;Li
         &gt;Anastasia Luccio&lt;/Li
       &gt;&lt;Li
         &gt;Ebenezar McCoy&lt;/Li
       &gt;&lt;Li
         &gt;Karrin Murphy&lt;/Li
       &gt;&lt;Li
         &gt;Thomas Raith&lt;/Li
       &gt;&lt;Li
         &gt;Susan Rodriguez&lt;/Li
     &gt;&lt;/Ul
   &gt;&lt;/Section
 &gt;&lt;/Body
&gt;&lt;/Html&gt;</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>&lt;article class="book"&gt;
 &lt;style&gt;
  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; }
 &lt;/style&gt;
 &lt;header&gt;
  &lt;hgroup&gt;
   &lt;h1&gt;My Book&lt;/h1&gt;
   &lt;h2&gt;A sample with not much content&lt;/h2&gt;
  &lt;/hgroup&gt;
  &lt;p&gt;&lt;small&gt;Published by Dummy Publicorp Ltd.&lt;/small&gt;&lt;/p&gt;
 &lt;/header&gt;
 &lt;section class="chapter"&gt;
  &lt;h1&gt;My First Chapter&lt;/h1&gt;
  &lt;p&gt;This is the first of my chapters. It doesn't say much.&lt;/p&gt;
  &lt;p&gt;But it has two paragraphs!&lt;/p&gt;
 &lt;/section&gt;
 &lt;section class="chapter"&gt;
  &lt;h1&gt;It Continutes: The Second Chapter&lt;/h1&gt;
  &lt;p&gt;Bla dee bla, dee bla dee bla. Boom.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section class="chapter"&gt;
  &lt;h1&gt;Chapter Three: A Further Example&lt;/h1&gt;
  &lt;p&gt;It's not like a battle between brightness and earthtones would go
  unnoticed.&lt;/p&gt;
  &lt;p&gt;But it might ruin my story.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section class="appendix"&gt;
  &lt;h1&gt;Appendix A: Overview of Examples&lt;/h1&gt;
  &lt;p&gt;These are demonstrations.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section class="appendix"&gt;
  &lt;h1&gt;Appendix B: Some Closing Remarks&lt;/h1&gt;
  &lt;p&gt;Hopefully this long example shows that you &lt;em&gt;can&lt;/em&gt; style
  sections, so long as they are used to indicate actual sections.&lt;/p&gt;
 &lt;/section&gt;
&lt;/article&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.4.3 The nav element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-aside-element.html">4.4.5 The aside element &#8594;</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>&lt;article itemscope itemtype="http://schema.org/BlogPosting"&gt;
 &lt;header&gt;
  &lt;h1 itemprop="headline"&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time itemprop="datePublished" datetime="2009-10-09"&gt;3 days ago&lt;/time&gt;&lt;/p&gt;
  &lt;link itemprop="url" href="?comments=0"&gt;
 &lt;/header&gt;[
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;footer&gt;
  &lt;a itemprop="discussionUrl" href="?comments=1"&gt;Show comments...&lt;/a&gt;
 &lt;/footer&gt;
&lt;/article&gt;</pre>

   <p>Here is that same blog post, but showing some of the comments:</p>

   <pre>&lt;article itemscope itemtype="http://schema.org/BlogPosting"&gt;
 &lt;header&gt;
  &lt;h1 itemprop="headline"&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time itemprop="datePublished" datetime="2009-10-09"&gt;3 days ago&lt;/time&gt;&lt;/p&gt;
  &lt;link itemprop="url" href="?comments=0"&gt;
 &lt;/header&gt;
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Comments&lt;/h1&gt;
  &lt;article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1"&gt;
   &lt;link itemprop="url" href="#c1"&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: &lt;span itemprop="creator" itemscope itemtype="http://schema.org/Person"&gt;
     &lt;span itemprop="name"&gt;George Washington&lt;/span&gt;
    &lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;&lt;time itemprop="commentTime" datetime="2009-10-10"&gt;15 minutes ago&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Yeah! Especially when talking about your lobbyist friends!&lt;/p&gt;
  &lt;/article&gt;
  &lt;article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2"&gt;
   &lt;link itemprop="url" href="#c2"&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: &lt;span itemprop="creator" itemscope itemtype="http://schema.org/Person"&gt;
     &lt;span itemprop="name"&gt;George Hammond&lt;/span&gt;
    &lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;&lt;time itemprop="commentTime" datetime="2009-10-10"&gt;5 minutes ago&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Hey, you have the same first name as me.&lt;/p&gt;
  &lt;/article&gt;
 &lt;/section&gt;
&lt;/article&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5.3 The pre element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-ol-element.html">4.5.5 The ol element &#8594;</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>&lt;blockquote&gt;
 &lt;p&gt;[Fred] then said he liked [...] fish.&lt;/p&gt;
&lt;/blockquote&gt;</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>&lt;blockquote&gt;
 &lt;p&gt;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.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&#8212; Stephen Roberts&lt;/p&gt;</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>&lt;figure&gt;
 &lt;blockquote&gt;
  &lt;p&gt;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 &#8212; never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;figcaption&gt;Carl Sagan, in "&lt;cite&gt;Wonder and Skepticism&lt;/cite&gt;", from
 the &lt;cite&gt;Skeptical Enquirer&lt;/cite&gt; Volume 19, Issue 1 (January-February
 1995)&lt;/cite&gt;&lt;/figcaption&gt;
&lt;/figure&gt;</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>&lt;p&gt;His next piece was the aptly named &lt;cite&gt;Sonnet 130&lt;/cite&gt;:&lt;/p&gt;
&lt;blockquote cite="http://quotes.example.org/s/sonnet130.html"&gt;
  &lt;p&gt;My mistress' eyes are nothing like the sun,&lt;br&gt;
  Coral is far more red, than her lips red,&lt;br&gt;
  ...</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>&lt;article&gt;
 &lt;h1&gt;&lt;a href="http://bacon.example.com/?blog=109431"&gt;Bacon on a crowbar&lt;/a&gt;&lt;/h1&gt;
 &lt;article&gt;
  &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 12 points 1 hour ago&lt;/header&gt;
  &lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;
  &lt;footer&gt;&lt;a href="?pid=29578"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
  &lt;article&gt;
   &lt;header&gt;&lt;strong&gt;greg&lt;/strong&gt; 8 points 1 hour ago&lt;/header&gt;
   &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
   &lt;footer&gt;&lt;a href="?pid=29579"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   &lt;article&gt;
    &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 15 points 1 hour ago&lt;/header&gt;
    &lt;blockquote&gt;
     &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
     &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
    &lt;/blockquote&gt;
    &lt;p&gt;Next thing you'll be saying they don't get capes and wizard
    hats either!&lt;/p&gt;
    &lt;footer&gt;&lt;a href="?pid=29580"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
    &lt;article&gt;
     &lt;article&gt;
      &lt;header&gt;&lt;strong&gt;boing&lt;/strong&gt; -5 points 1 hour ago&lt;/header&gt;
      &lt;p&gt;narwhals are worse than ceiling cat&lt;/p&gt;
      &lt;footer&gt;&lt;a href="?pid=29581"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
     &lt;/article&gt;
    &lt;/article&gt;
   &lt;/article&gt;
  &lt;/article&gt;
  &lt;article&gt;
   &lt;header&gt;&lt;strong&gt;fred&lt;/strong&gt; 1 points 23 minutes ago&lt;/header&gt;
   &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   &lt;p&gt;I bet they'd love to peel a banana too.&lt;/p&gt;
   &lt;footer&gt;&lt;a href="?pid=29582"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
  &lt;/article&gt;
 &lt;/article&gt;
&lt;/article&gt;</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>&lt;p&gt;He began his list of "lessons" with the following:&lt;/p&gt;
&lt;blockquote&gt;One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.&lt;/blockquote&gt;
&lt;p&gt;He continued with a number of similar points, ending with:&lt;/p&gt;
&lt;blockquote&gt;Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possiblity.&lt;/blockquote&gt;
&lt;p&gt;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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.21 The rt element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-bdi-element.html">4.6.23 The bdi element &#8594;</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="">&#28450;&#23383;</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">...
&lt;ruby&gt;&#28450;&lt;rp&gt; (&lt;/rp&gt;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&lt;rp&gt;) &lt;/rp&gt;&#23383;&lt;rp&gt; (&lt;/rp&gt;&lt;rt&gt;&#12376;&lt;/rt&gt;&lt;rp&gt;) &lt;/rp&gt;&lt;/ruby&gt;
...</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">... &#28450; (&#12363;&#12435;) &#23383; (&#12376;) ...</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.11 Interactive elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-summary-element.html">4.11.2 The summary element &#8594;</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>&lt;section class="progress window"&gt;
 &lt;h1&gt;Copying "Really Achieving Your Childhood Dreams"&lt;/h1&gt;
 &lt;details&gt;
  &lt;summary&gt;Copying... &lt;progress max="375505392" value="97543282"&gt;&lt;/progress&gt; 25%&lt;/summary&gt;
  &lt;dl&gt;
   &lt;dt&gt;Transfer rate:&lt;/dt&gt; &lt;dd&gt;452KB/s&lt;/dd&gt;
   &lt;dt&gt;Local filename:&lt;/dt&gt; &lt;dd&gt;/home/rpausch/raycd.m4v&lt;/dd&gt;
   &lt;dt&gt;Remote filename:&lt;/dt&gt; &lt;dd&gt;/var/www/lectures/raycd.m4v&lt;/dd&gt;
   &lt;dt&gt;Duration:&lt;/dt&gt; &lt;dd&gt;01:16:27&lt;/dd&gt;
   &lt;dt&gt;Color profile:&lt;/dt&gt; &lt;dd&gt;SD (6-1-6)&lt;/dd&gt;
   &lt;dt&gt;Dimensions:&lt;/dt&gt; &lt;dd&gt;320&#215;240&lt;/dd&gt;
  &lt;/dl&gt;
 &lt;/details&gt;
&lt;/section&gt;</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>&lt;details&gt;
 &lt;summary&gt;&lt;label for=fn&gt;Name &amp; Extension:&lt;/label&gt;&lt;/summary&gt;
 &lt;p&gt;&lt;input type=text id=fn name=fn value="Pillar Magazine.pdf"&gt;
 &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=ext checked&gt; Hide extension&lt;/label&gt;
&lt;/details&gt;</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>&lt;style&gt;
 details &gt; summary { transition: color 1s; color: black; }
 details[open] &gt; summary { color: red; }
&lt;/style&gt;
&lt;details&gt;
 &lt;summary&gt;Automated Status: Operational&lt;/summary&gt;
 &lt;p&gt;Velocity: 12m/s&lt;/p&gt;
 &lt;p&gt;Direction: North&lt;/p&gt;
&lt;/details&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.4.4 The article element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-hgroup-element.html">4.4.7 The hgroup element &#8594;</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>&lt;aside&gt;
 &lt;h1&gt;Switzerland&lt;/h1&gt;
 &lt;p&gt;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.&lt;/p&gt;
&lt;/aside&gt;</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>...

&lt;p&gt;He later joined a large company, continuing on the same work.
&lt;q&gt;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.&lt;/q&gt;&lt;/p&gt;

&lt;aside&gt;
 &lt;q&gt; 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. &lt;/q&gt;
&lt;/aside&gt;

&lt;p&gt;Of course his work &#8212; or should that be hobby? &#8212;
isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

...</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>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;My wonderful blog&lt;/h1&gt;
  &lt;p&gt;My tagline&lt;/p&gt;
 &lt;/header&gt;
 &lt;aside&gt;
  &lt;!-- <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> --&gt;
  &lt;nav&gt;
   &lt;h1&gt;My blogroll&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="http://blog.example.com/"&gt;Example Blog&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav&gt;
   &lt;h1&gt;Archives&lt;/h1&gt;
   &lt;ol reversed&gt;
    &lt;li&gt;&lt;a href="/last-post"&gt;My last post&lt;/a&gt;
    &lt;li&gt;&lt;a href="/first-post"&gt;My first post&lt;/a&gt;
   &lt;/ol&gt;
  &lt;/nav&gt;
 &lt;/aside&gt;
 &lt;aside&gt;
  &lt;!-- <em>this aside is tangentially related to the page also, it
  contains twitter messages from the blog author</em> --&gt;
  &lt;h1&gt;Twitter Feed&lt;/h1&gt;
  &lt;blockquote cite="http://twitter.example.net/t31351234"&gt;
   I'm on vacation, writing my blog.
  &lt;/blockquote&gt;
  &lt;blockquote cite="http://twitter.example.net/t31219752"&gt;
   I'm going to go on vacation soon.
  &lt;/blockquote&gt;
 &lt;/aside&gt;
 &lt;article&gt;
  &lt;!-- <em>this is a blog post</em> --&gt;
  &lt;h1&gt;My last post&lt;/h1&gt;
  &lt;p&gt;This is my last post.&lt;/p&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;!-- <em>this is also a blog post</em> --&gt;
  &lt;h1&gt;My first post&lt;/h1&gt;
  &lt;p&gt;This is my first post.&lt;/p&gt;
  &lt;aside&gt;
   &lt;!-- <em>this aside is about the blog post, since it's inside the
   &lt;article&gt; 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> --&gt;
   &lt;h1&gt;Posting&lt;/h1&gt;
   &lt;p&gt;While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;nav&gt;
   &lt;a href="/archives"&gt;Archives&lt;/a&gt; &#8212;
   &lt;a href="/about"&gt;About me&lt;/a&gt; &#8212;
   &lt;a href="/copyright"&gt;Copyright&lt;/a&gt;
  &lt;/nav&gt;
 &lt;/footer&gt;
&lt;/body&gt;</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>&lt;body&gt;
&lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
&lt;h2&gt;Diving in&lt;/h2&gt;
&lt;h2&gt;Simple shapes&lt;/h2&gt;
&lt;h2&gt;Canvas coordinates&lt;/h2&gt;
&lt;h3&gt;Canvas coordinates diagram&lt;/h3&gt;
&lt;h2&gt;Paths&lt;/h2&gt;
&lt;/body&gt;</pre>

   <pre>&lt;body&gt;
 &lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
 &lt;section&gt;
  &lt;h1&gt;Diving in&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Simple shapes&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Canvas coordinates&lt;/h1&gt;
  &lt;section&gt;
   &lt;h1&gt;Canvas coordinates diagram&lt;/h1&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Paths&lt;/h1&gt;
 &lt;/section&gt;
&lt;/body&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.2.1 The head element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-base-element.html">4.2.3 The base element &#8594;</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>  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
    ...
  &lt;h1&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This companion guide to the highly successful
  &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt; 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>  &lt;title&gt;Dances used during bee mating rituals&lt;/title&gt;
    ...
  &lt;h1&gt;The Dances&lt;/h1&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...2523 lines suppressed...]
   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Online status&lt;/title&gt;
  &lt;script&gt;
   function updateIndicator() {
     document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"&gt;
  &lt;p&gt;The network is: &lt;span id="indicator"&gt;(state unknown)&lt;/span&gt;
 &lt;/body&gt;
&lt;/html&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.10.19.6 Form submission</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="constraints.html">4.10.21 Constraints &#8594;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.6.22 The rp element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-bdo-element.html">4.6.24 The bdo element &#8594;</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>&lt;ul&gt;
 &lt;li&gt;User &lt;bdi&gt;jcranmer&lt;/bdi&gt;: 12 posts.
 &lt;li&gt;User &lt;bdi&gt;hober&lt;/bdi&gt;: 5 posts.
 &lt;li&gt;User &lt;bdi&gt;<bdo dir="rtl">&#1573;&#1610;&#1575;&#1606;</bdo>&lt;/bdi&gt;: 3 posts.
&lt;/ul&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.10.4 The fieldset element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-label-element.html">4.10.6 The label element &#8594;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.5.8 The dl element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-dd-element.html">4.5.10 The dd element &#8594;</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>&lt;article&gt;
 &lt;h1&gt;FAQ&lt;/h1&gt;
 &lt;dl&gt;
  &lt;dt&gt;What do we want?&lt;/dt&gt;
  &lt;dd&gt;Our data.&lt;/dd&gt;
  &lt;dt&gt;When do we want it?&lt;/dt&gt;
  &lt;dd&gt;Now.&lt;/dd&gt;
  &lt;dt&gt;Where is it?&lt;/dt&gt;
  &lt;dd&gt;We are not sure.&lt;/dd&gt;
 &lt;/dl&gt;
&lt;/article&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: history.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>5.5 Session history and navigation &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.8.7 The audio element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-track-element.html">4.8.9 The track element &#8594;</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>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;</pre></dd>

    <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'&gt;</pre></dd>

    <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'&gt;</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>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'&gt;</pre></dd>


    <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'&gt;</pre></dd>

    <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
    <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'&gt;</pre></dd>

    <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt>
    <dd><pre>&lt;source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;</pre></dd>


    <dt>Theora video and Vorbis audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'&gt;</pre></dd>

    <dt>Theora video and Speex audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, speex"'&gt;</pre></dd>

    <dt>Vorbis audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.ogg' type='audio/ogg; codecs=vorbis'&gt;</pre></dd>

    <dt>Speex audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.spx' type='audio/ogg; codecs=speex'&gt;</pre></dd>

    <dt>FLAC audio alone in Ogg container</dt>
    <dd><pre>&lt;source src='audio.oga' type='audio/ogg; codecs=flac'&gt;</pre></dd>

    <dt>Dirac video and Vorbis audio in Ogg container</dt>
    <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'&gt;</pre></dd>

<!-- awaiting definition by the Matroska guys:
    <dt>Theora video and Vorbis audio in Matroska container</dt>
    <dd><pre>&lt;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>&lt;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>&lt;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>&lt;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>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>

    <dt>XviD video and MP3 audio in AVI container</dt>
    <dd><pre>&lt;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>&lt;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>&lt;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>&lt;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>&lt;script&gt;
 function fallback(video) {
   // replace &lt;video&gt; 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);
 }
&lt;/script&gt;
&lt;video controls autoplay&gt;
 &lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
 &lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)"&gt;
 ...
&lt;/video&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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">&#8592; 4.8.2 The iframe element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-object-element.html">4.8.4 The object element &#8594;</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">&lt;path&gt;</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">&lt;path&gt;</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>&lt;embed src="catgame.swf"&gt;</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>&lt;embed src="catgame.swf" quality="high"&gt;</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>&lt;object data="catgame.swf"&gt;
 &lt;param name="quality" value="high"&gt;
&lt;/object&gt;</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 &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="edits.html" title="4.7 Edits" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-del-element.html" title="4.7.2 The del 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="edits.html">&#8592; 4.7 Edits</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-del-element.html">4.7.2 The del element &#8594;</a>
  </div>

  <h4 id="the-ins-element"><span class="secno">4.7.1 </span>The <dfn><code>ins</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-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-ins-element">ins</a></code> element <a href="rendering.html#represents">represents</a> an addition
  to the document.</p>

  <div class="example">

   <p>The following represents the addition of a single paragraph:</p>

   <pre>&lt;aside&gt;
 &lt;ins&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <p>As does this, because everything in the <code><a href="the-aside-element.html#the-aside-element">aside</a></code>
   element here counts as <a href="content-models.html#phrasing-content-1">phrasing content</a> and therefore
   there is just one <a href="content-models.html#paragraph">paragraph</a>:</p>

   <pre>&lt;aside&gt;
 &lt;ins&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

  </div>

  <p><code><a href="#the-ins-element">ins</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 example represents the addition of two paragraphs,
   the second of which was inserted in two parts. The first
   <code><a href="#the-ins-element">ins</a></code> element in this example thus crosses a paragraph
   boundary, which is considered poor form.</p>

   <pre class="bad">&lt;aside&gt;
 &lt;!-- don't do this --&gt;
 &lt;ins datetime="2005-03-16 00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19 00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <p>Here is a better way of marking this up. It uses more elements,
   but none of the elements cross implied paragraph boundaries.</p>

   <pre>&lt;aside&gt;
 &lt;ins datetime="2005-03-16 00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
 &lt;ins datetime="2005-03-16 00:00Z"&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19 00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</pre>

   <!-- Those dates aren't random. They're the start and end of
   something. Can you guess what? -->

  </div>


  </body></html>
--- NEW FILE: the-col-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.4 The col element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-colgroup-element.html" title="4.9.3 The colgroup element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-tbody-element.html" title="4.9.5 The tbody 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-colgroup-element.html">&#8592; 4.9.3 The colgroup element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-tbody-element.html">4.9.5 The tbody element &#8594;</a>
  </div>

  <h4 id="the-col-element"><span class="secno">4.9.4 </span>The <dfn><code>col</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-colgroup-element.html#the-colgroup-element">colgroup</a></code> element that doesn't have
   a <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute.</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-col-span"><a href="#attr-col-span">span</a></code></dd>
   <!-- v2: char, to specify the decimal character used in numeric data cells in the column (not header cells) -->
   <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
   <dd>
    <p><code><a href="the-colgroup-element.html#htmltablecolelement">HTMLTableColElement</a></code>, same as for
    <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code> elements. This interface defines one member,
    <code title="dom-col-span"><a href="#dom-col-span">span</a></code>.</p>
   </dd>
  </dl><!--TOPIC:HTML--><p>If a <code><a href="#the-col-element">col</a></code> element has a parent and that is a
  <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code> element that itself has a parent that is a
  <code><a href="the-table-element.html#the-table-element">table</a></code> element, then the <code><a href="#the-col-element">col</a></code> element
  <a href="rendering.html#represents">represents</a> one or more <a href="attributes-common-to-td-and-th-elements.html#concept-column" title="concept-column">columns</a> in the <a href="attributes-common-to-td-and-th-elements.html#concept-column-group" title="concept-column-group">column group</a> represented by that
  <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>.</p>

  <p>The element may have a <dfn id="attr-col-span" title="attr-col-span"><code>span</code></dfn> content attribute
  specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p>

  <div class="impl">

  <p>The <code><a href="#the-col-element">col</a></code> element and its <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute take part in the
  <a href="attributes-common-to-td-and-th-elements.html#table-model">table model</a>.</p>

  <p>The <dfn id="dom-col-span" title="dom-col-span"><code>span</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The value must be <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
  numbers greater than zero</a>.</p>

  </div>


  </body></html>
--- NEW FILE: the-em-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.2 The em element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-a-element.html" title="4.6.1 The a element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-strong-element.html" title="4.6.3 The strong 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-a-element.html">&#8592; 4.6.1 The a element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-strong-element.html">4.6.3 The strong element &#8594;</a>
  </div>

  <h4 id="the-em-element"><span class="secno">4.6.2 </span>The <dfn><code>em</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-em-element">em</a></code> element <a href="rendering.html#represents">represents</a> stress
  emphasis of its contents.</p>

  <p>The level of emphasis that a particular piece of content has is
  given by its number of ancestor <code><a href="#the-em-element">em</a></code> elements.</p>

  <p>The placement of emphasis changes the meaning of the sentence.
  The element thus forms an integral part of the content. The precise
  way in which emphasis is used in this way depends on the
  language.</p>

  <div class="example">

   <p>These examples show how changing the emphasis changes the
   meaning. First, a general statement of fact, with no emphasis:</p>

   <pre>&lt;p&gt;Cats are cute animals.&lt;/p&gt;</pre>

   <p>By emphasizing the first word, the statement implies that the
   kind of animal under discussion is in question (maybe someone is
   asserting that dogs are cute):</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats&lt;/em&gt; are cute animals.&lt;/p&gt;</pre>

   <p>Moving the emphasis to the verb, one highlights that the truth
   of the entire sentence is in question (maybe someone is saying cats
   are not cute):</p>

   <pre>&lt;p&gt;Cats &lt;em&gt;are&lt;/em&gt; cute animals.&lt;/p&gt;</pre>

   <p>By moving it to the adjective, the exact nature of the cats
   is reasserted (maybe someone suggested cats were <em>mean</em>
   animals):</p>

   <pre>&lt;p&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals.&lt;/p&gt;</pre>

   <p>Similarly, if someone asserted that cats were vegetables,
   someone correcting this might emphasize the last word:</p>

   <pre>&lt;p&gt;Cats are cute &lt;em&gt;animals&lt;/em&gt;.&lt;/p&gt;</pre>

   <p>By emphasizing the entire sentence, it becomes clear that the
   speaker is fighting hard to get the point across. This kind of
   emphasis also typically affects the punctuation, hence the
   exclamation mark here.</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats are cute animals!&lt;/em&gt;&lt;/p&gt;</pre>

   <p>Anger mixed with emphasizing the cuteness could lead to markup
   such as:</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals!&lt;/em&gt;&lt;/p&gt;</pre>

  </div>

  <div class="note">

   <p>The <code><a href="#the-em-element">em</a></code> element isn't a generic "italics"
   element. Sometimes, text is intended to stand out from the rest of
   the paragraph, as if it was in a different mood or voice. For this,
   the <code><a href="the-i-element.html#the-i-element">i</a></code> element is more appropriate.</p>

   <p>The <code><a href="#the-em-element">em</a></code> element also isn't intended to convey
   importance; for that purpose, the <code><a href="the-strong-element.html#the-strong-element">strong</a></code> element is
   more appropriate.</p>

   <!--

    Thus the following is a bad use of <em>:

      <p><em>Note</em>: ...</p>

    You should use <strong> or <i> for this instead (depending on
    exactly what you're doing).

   -->

  </div>



  </body></html>
--- NEW FILE: semantics.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4 The elements of HTML &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="dynamic-markup-insertion.html" title="3.4 Dynamic markup insertion" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-html-element.html" title="4.1.1 The html 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="dynamic-markup-insertion.html">&#8592; 3.4 Dynamic markup insertion</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-html-element.html">4.1.1 The html element &#8594;</a>
  <ol class="toc"><li><a href="semantics.html#semantics"><span class="secno">4 </span>The elements of HTML</a>
  <ol><li><a href="semantics.html#the-root-element"><span class="secno">4.1 </span>The root element</a>
    </li></ol></li></ol></div>

  <h2 id="semantics"><span class="secno">4 </span>The elements of HTML</h2>

  <h3 id="the-root-element"><span class="secno">4.1 </span>The root element</h3>

  </body></html>
--- NEW FILE: the-q-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.7 The q element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-cite-element.html" title="4.6.6 The cite element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-dfn-element.html" title="4.6.8 The dfn 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-cite-element.html">&#8592; 4.6.6 The cite element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-dfn-element.html">4.6.8 The dfn element &#8594;</a>
  </div>

  <h4 id="the-q-element"><span class="secno">4.6.7 </span>The <dfn><code>q</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><code title="attr-q-cite"><a href="#attr-q-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>Uses <code><a href="the-blockquote-element.html#htmlquoteelement">HTMLQuoteElement</a></code>.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-q-element">q</a></code> element <a href="rendering.html#represents">represents</a> some <a href="content-models.html#phrasing-content-1" title="phrasing content">phrasing content</a> quoted from another
  source.</p>

  <p>Quotation punctuation (such as quotation marks) that is quoting
  the contents of the element must not appear immediately before,
  after, or inside <code><a href="#the-q-element">q</a></code> elements; they will be inserted into
  the rendering by the user agent.</p>

  <p>Content inside a <code><a href="#the-q-element">q</a></code> element must be quoted from
  another source, whose address, if it has one, may be cited in the
  <dfn id="attr-q-cite" title="attr-q-cite"><code>cite</code></dfn> attribute. The
  source may be fictional, as when quoting characters in a novel or
  screenplay.</p>

  <p>If the <code title="attr-q-cite"><a href="#attr-q-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 <code><a href="#the-q-element">q</a></code> element must not be used in place of quotation
  marks that do not represent quotes; for example, it is inappropriate
  to use the <code><a href="#the-q-element">q</a></code> element for marking up sarcastic
  statements.</p>

  <p>The use of <code><a href="#the-q-element">q</a></code> elements to mark up quotations is
  entirely optional; using explicit quotation punctuation without
  <code><a href="#the-q-element">q</a></code> elements is just as correct.</p>

  <div class="example">

   <p>Here is a simple example of the use of the <code><a href="#the-q-element">q</a></code>
   element:</p>

   <pre>&lt;p&gt;The man said &lt;q&gt;Things that are impossible just take
longer&lt;/q&gt;. I disagreed with him.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>Here is an example with both an explicit citation link in the
   <code><a href="#the-q-element">q</a></code> element, and an explicit citation outside:</p>

   <pre>&lt;p&gt;The W3C page &lt;cite&gt;About W3C&lt;/cite&gt; says the W3C's
mission is &lt;q cite="http://www.w3.org/Consortium/"&gt;To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web&lt;/q&gt;. I
disagree with this mission.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>In the following example, the quotation itself contains a
   quotation:</p>

   <pre>&lt;p&gt;In &lt;cite&gt;Example One&lt;/cite&gt;, he writes &lt;q&gt;The man
said &lt;q&gt;Things that are impossible just take longer&lt;/q&gt;. I
disagreed with him&lt;/q&gt;. Well, I disagree even more!&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>In the following example, quotation marks are used instead of
   the <code><a href="#the-q-element">q</a></code> element:</p>

   <pre>&lt;p&gt;His best argument was &#10077;I disagree&#10078;, which
I thought was laughable.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>In the following example, there is no quote &#8212; the
   quotation marks are used to name a word. Use of the <code><a href="#the-q-element">q</a></code>
   element in this case would be inappropriate.</p>

   <pre>&lt;p&gt;The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.&lt;/p&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-style-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.2.6 The style element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-meta-element.html" title="4.2.5 The meta element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="styling.html" title="4.2.7 Styling" 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-meta-element.html">&#8592; 4.2.5 The meta element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="styling.html">4.2.7 Styling &#8594;</a>
  </div>

  <h4 id="the-style-element"><span class="secno">4.2.6 </span>The <dfn><code>style</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>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: <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>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: where <a href="content-models.html#metadata-content-0">metadata content</a> is expected.</dd>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: in a <code><a href="the-noscript-element.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="the-head-element.html#the-head-element">head</a></code> element.</dd>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: where <a href="content-models.html#flow-content-1">flow content</a> is expected, but before any other <a href="content-models.html#flow-content-1">flow content</a> other than <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>, and not as the child of an element whose content model is <a href="content-models.html#transparent">transparent</a>.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Depends on the value of the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, but must match requirements described in prose below.</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-style-media"><a href="#attr-style-media">media</a></code></dd>
   <dd><code title="attr-style-type"><a href="#attr-style-type">type</a></code></dd>
   <dd><code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code></dd>
   <dd>Also, the <code title="attr-style-title"><a href="#attr-style-title">title</a></code> 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>
<pre class="idl">interface <dfn id="htmlstyleelement">HTMLStyleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-style-disabled" title="dom-style-disabled">disabled</a>;
           attribute DOMString <a href="#dom-style-media" title="dom-style-media">media</a>;
           attribute DOMString <a href="#dom-style-type" title="dom-style-type">type</a>;
           attribute boolean <a href="#dom-style-scoped" title="dom-style-scoped">scoped</a>;
};
<a href="#htmlstyleelement">HTMLStyleElement</a> implements <a href="infrastructure.html#linkstyle">LinkStyle</a>;</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-style-element">style</a></code> element allows authors to embed style
  information in their documents. The <code><a href="#the-style-element">style</a></code> element is
  one of several inputs to the <a href="styling.html#styling">styling processing
  model</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> content for the user.</p>

  <p>The <dfn id="attr-style-type" title="attr-style-type"><code>type</code></dfn>
  attribute gives the styling language. If the attribute is present,
  its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a> that designates a
  styling language. The <code title="">charset</code> parameter must
  not be specified. The default value for the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, which is used if the
  attribute is absent, is "<code title="">text/css</code>". <a href="references.html#refsRFC2318">[RFC2318]</a></p>

  <div class="impl">

  <!-- this paragraph is also present in the <script> section -->
  <p>When examining types to determine if they support the language,
  user agents must not ignore unknown MIME parameters &#8212; types
  with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
  parameter for the purpose of comparing <a href="infrastructure.html#mime-type" title="MIME type">MIME
  types</a> here.</p>

  </div>

  <p>The <dfn id="attr-style-media" title="attr-style-media"><code>media</code></dfn>
  attribute says which media the styles apply to. The value must be a
  <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.  <span class="impl">The user agent
  must apply the styles when the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute's value
  <a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
  conditions apply, and must not apply them otherwise.</span></p><!--
  note similar text in <link> section -->

  <div class="impl">

  <p class="note">The styles might be further limited in scope,
  e.g. in CSS with the use of <code title="">@media</code>
  blocks. This specification does not override such further
  restrictions or requirements.</p><!-- note similar text in <link>
  section -->

  </div>

  <p id="style-default-media">The default, if the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute is omitted, is
  "<code title="">all</code>", meaning that by default styles apply to
  all media.</p>

  <p>The <dfn id="attr-style-scoped" title="attr-style-scoped"><code>scoped</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If present, it
  indicates that the styles are intended just for the subtree rooted
  at the <code><a href="#the-style-element">style</a></code> element's parent element, as opposed to
  the whole <code><a href="dom.html#document">Document</a></code>.</p>

  <p>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is
  present and the element has a parent element, then the
  <code><a href="#the-style-element">style</a></code> element must be the first node of <a href="content-models.html#flow-content-1">flow
  content</a> in its parent element other than <a href="content-models.html#inter-element-whitespace">inter-element
  whitespace</a>, and the parent element's content model must not
  have a <a href="content-models.html#transparent">transparent</a> component.</p>

  <p class="note">This implies that only one scoped <code><a href="#the-style-element">style</a></code>
  element is allowed at a time, and that such elements cannot be
  children of, e.g., <code><a href="the-a-element.html#the-a-element">a</a></code> or <code><a href="the-ins-element.html#the-ins-element">ins</a></code> elements, even
  when those are used as <a href="content-models.html#flow-content-1">flow content</a> containers.</p>

  <div class="impl">

  <p>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is
  present, then the user agent must apply the specified style
  information only to the <code><a href="#the-style-element">style</a></code> element's parent element
  (if any), and that element's descendants. Otherwise, the specified
  styles must, if applied, be applied to the entire document.</p>

  <p class="critical">The following will eventually be moved to a CSS
  specification; it is specified here only on an interim basis until
  an editor can be found to own this.</p>

  <p>Within scoped CSS resources, authors may use an <code title="">@global</code> @-rule. The syntax of this rule is defined
  as follows.</p>

  <p>The following production is added to the grammar:</p>

  <pre>global
  : GLOBAL_SYM S* ruleset
  ;</pre>

  <p>The following rules are added to the Flex tokenizer:</p>

  <pre>B                     b|\\0{0,4}(42|62)(\r\n|[ \t\r\n\f])?
@{G}{L}{O}{B}{A}{L}   {return GLOBAL_SYM;}</pre>

  <p>Simple selectors in rule sets prefixed by the <code title="">@global</code> @-rule in scoped CSS resources must be
  processed in the same way as normal rule sets in non-scoped CSS
  resources.</p>

  <p>Simple selectors in scoped CSS resources that are not prefixed by
  an <code title="">@global</code> @-rule must only match the
  <code><a href="#the-style-element">style</a></code> element's parent element (if any), and that
  element's descendants.</p>

  <p>For scoped CSS resources, the effect of other @-rules must be
  scoped to the scoped sheet and its subresources, even if the @-rule
  in question would ordinarily apply to all style sheets that affect
  the <code><a href="dom.html#document">Document</a></code>. Any '@page' rules in scoped CSS resources
  must be ignored.</p>

  <p class="example">For example, an '@font-face' rule defined in a
  scoped style sheet would only define the font for the purposes of
  font rules in the scoped section; style sheets outside the scoped
  section using the same font name would not end up using that
  embedded font.</p>

  <hr></div>

  <p id="title-on-style">The <dfn id="attr-style-title" title="attr-style-title"><code>title</code></dfn> attribute on
  <code><a href="#the-style-element">style</a></code> elements defines <a href="infrastructure.html#alternative-style-sheet-sets">alternative style sheet
  sets</a>. If the <code><a href="#the-style-element">style</a></code> element has no <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute, then it has no
  title; the <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute of
  ancestors does not apply to the <code><a href="#the-style-element">style</a></code> element. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <p class="note">The <code title="attr-style-title"><a href="#attr-style-title">title</a></code>
  attribute on <code><a href="#the-style-element">style</a></code> elements, like the <code title="attr-link-title"><a href="the-link-element.html#attr-link-title">title</a></code> attribute on <code><a href="the-link-element.html#the-link-element">link</a></code>
  elements, differs from the global <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute in that a
  <code><a href="#the-style-element">style</a></code> block without a title does not inherit the title
  of the parent element: it merely has no title.</p>

  <p>The <code><a href="infrastructure.html#textcontent">textContent</a></code> of a <code><a href="#the-style-element">style</a></code> element must
  match the <code title="">style</code> production in the following
  ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p>

  <pre>style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = &lt;any string that doesn't contain a substring that matches c-start &gt;
c-start       = "&lt;!--"
no-c-end      = &lt;any string that doesn't contain a substring that matches c-end &gt;
c-end         = "--&gt;"</pre>

  <!-- Unmatched comment-like syntax is invalid on a temporary basis,
       waiting for IE, WebKit, and Opera to fix their parsing bug
       whereby such comments trigger a weird escape in which </style>
       is ignored. Otherwise, parsing behaviour in those browsers
       could differ substantially from the parsing behaviour of HTML5.
       Once everyone follows the HTML5 spec, we can drop this
       requirement.
  -->

  <div class="impl">

  <p>All descendant elements must be processed, according to their
  semantics, before the <code><a href="#the-style-element">style</a></code> element itself is
  evaluated. For styling languages that consist of pure text (as
  opposed to XML), user agents must evaluate <code><a href="#the-style-element">style</a></code>
  elements by passing the 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-style-element">style</a></code> element (not any other nodes such as comments or
  elements), in <a href="infrastructure.html#tree-order">tree order</a>, to the style system. For
  XML-based styling languages, user agents must pass all the child
  nodes of the <code><a href="#the-style-element">style</a></code> element to the style system.</p>

  <p>All <a href="urls.html#url" title="URL">URLs</a> found by the styling language's
  processor must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>,
  relative to the element (or as defined by the styling language),
  when the processor is invoked.<!-- so dynamic changes to the base
  URL don't affect the CSS --></p>

  <!-- the next few paragraph are similar to text in the <style> section -->
  <p>Once the attempts to obtain the style sheet's <a href="infrastructure.html#critical-subresources">critical
  subresources</a>, if any, are complete, or, if the style sheet
  has no <a href="infrastructure.html#critical-subresources">critical subresources</a>, once the style sheet has
  been parsed and processed, the user agent must, if the loads were
  successful or there were none, <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-load">load</code> at the <code><a href="#the-style-element">style</a></code> element,
  or, if one of the style sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>
  failed to completely load for any reason (e.g. DNS error, HTTP 404
  response, a connection being prematurely closed, unsupported
  Content-Type), <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-error">error</code> at the
  <code><a href="#the-style-element">style</a></code> element. Non-network errors in processing the
  style sheet or its subresources (e.g. CSS parse errors, PNG decoding
  errors) are not failures for the purposes of this paragraph.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
  source</a>.</p>

  <p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
  element's document until all the attempts to obtain the style
  sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>, if any, are
  complete.</p>

  </div>

  <p class="note">This specification does not specify a style system,
  but CSS is expected to be supported by most Web browsers. <a href="references.html#refsCSS">[CSS]</a></p>

  <div class="impl">

  <p>The <dfn id="dom-style-media" title="dom-style-media"><code>media</code></dfn>, <dfn id="dom-style-type" title="dom-style-type"><code>type</code></dfn> and <dfn id="dom-style-scoped" title="dom-style-scoped"><code>scoped</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name.</p>

  </div>

  <p>The <dfn id="dom-style-disabled" title="dom-style-disabled"><code>disabled</code></dfn>
  IDL attribute behaves as defined <a href="styling.html#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative style sheets
  DOM</a>.</p>

  <p>The <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface is also implemented by
  this element; the <a href="styling.html#styling">styling processing model</a> defines
  how. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <div class="example">

   <p>The following document has its emphasis styled as bright red
   text rather than italics text, while leaving titles of works and
   Latin words in their default italics. It shows how using
   appropriate elements enables easier restyling of documents.</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
 &lt;head&gt;
  &lt;title&gt;My favorite book&lt;/title&gt;
  &lt;style&gt;
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;My &lt;em&gt;favorite&lt;/em&gt; book of all time has &lt;em&gt;got&lt;/em&gt; to be
  &lt;cite&gt;A Cat's Life&lt;/cite&gt;. It is a book by P. Rahmel that talks
  about the &lt;i lang="la"&gt;Felis Catus&lt;/i&gt; in modern human society.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: syntax.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>8 The HTML syntax &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1146 lines suppressed...]
&lt;/math&gt;</pre>

  </div>


  <h4 id="comments"><span class="secno">8.1.6 </span>Comments</h4>

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


  </body></html>
--- NEW FILE: webappapis.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>6 Web application APIs &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1985 lines suppressed...]

   </li>

   <li><p>Return <var title="">output</var>.</p></li>

  </ol><!-- Note: this function is defined explicitly here because RFC4648
  does not specify how to handle erroneous input, and no preexisting
  browser implementation simply throws an exception on all erroneous
  input. --></div>

  <p class="note">Some base64 encoders add newlines or other
  whitespace to their output. The <code title="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob()</a></code> method throws an
  exception if its input contains characters other than those
  described by the regular expression bracket expression <code title="">[+/=0-9A-Za-z]</code>, so other characters need to be
  removed before <code title="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob()</a></code> is
  used for decoding.</p>



  </body></html>
--- NEW FILE: attributes-common-to-form-controls.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.19 Attributes common to form controls &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="association-of-controls-and-forms.html" title="4.10.18 Association of controls and forms" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="form-submission.html" title="4.10.19.6 Form submission" 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="association-of-controls-and-forms.html">&#8592; 4.10.18 Association of controls and forms</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="form-submission.html">4.10.19.6 Form submission &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="attributes-common-to-form-controls.html#attributes-common-to-form-controls"><span class="secno">4.10.19 </span>Attributes common to form controls</a>
      <ol><li><a href="attributes-common-to-form-controls.html#naming-form-controls"><span class="secno">4.10.19.1 </span>Naming form controls</a></li><li><a href="attributes-common-to-form-controls.html#enabling-and-disabling-form-controls"><span class="secno">4.10.19.2 </span>Enabling and disabling form controls</a></li><li><a href="attributes-common-to-form-controls.html#a-form-control's-value"><span class="secno">4.10.19.3 </span>A form control's value</a></li><li><a href="attributes-common-to-form-controls.html#autofocusing-a-form-control"><span class="secno">4.10.19.4 </span>Autofocusing a form control</a></li><li><a href="attributes-common-to-form-controls.html#limiting-user-input-length"><span class="secno">4.10.19.5 </span>Limiting user input length</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="attributes-common-to-form-controls"><span class="secno">4.10.19 </span><dfn>Attributes common to form controls</dfn></h4>

  <h5 id="naming-form-controls"><span class="secno">4.10.19.1 </span>Naming form controls</h5>

  <p>The <dfn id="attr-fe-name" title="attr-fe-name"><code>name</code></dfn> content
  attribute gives the name of the form control, as used in <a href="constraints.html#form-submission-0">form
  submission</a> and in the <code><a href="the-form-element.html#the-form-element">form</a></code> element's <code title="dom-form-elements"><a href="the-form-element.html#dom-form-elements">elements</a></code> object. If the attribute
  is specified, its value must not be the empty string.</p>

  <p>Any non-empty value for <code title="attr-form-name"><a href="the-form-element.html#attr-form-name">name</a></code>
  is allowed, but the names "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>" and "<code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code>" are special:</p>

  <dl><dt><dfn id="attr-fe-name-isindex" title="attr-fe-name-isindex"><code>isindex</code></dfn></dt>
   <dd>
    <p>This value, if used as the name of a <a href="states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-text">Text</a> control that is the first
    control in a form that is submitted using the <code title="attr-fs-enctype-urlencoded"><a href="form-submission.html#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
    mechanism, causes the submission to only include the value of this
    control, with no name.</p>
   </dd>

   <dt><dfn id="attr-fe-name-charset" title="attr-fe-name-charset"><code>_charset_</code></dfn></dt>
   <dd>
    <p>This value, if used as the name of a <a href="states-of-the-type-attribute.html#hidden-state-(type=hidden)" title="attr-input-type-hidden">Hidden</a> control with no <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, is automatically
    given a value during submission consisting of the submission
    character encoding.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-fe-name" title="dom-fe-name"><code>name</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> content attribute.</p>

  </div>


  <h5 id="enabling-and-disabling-form-controls"><span class="secno">4.10.19.2 </span>Enabling and disabling form controls</h5>

  <p>The <dfn id="attr-fe-disabled" title="attr-fe-disabled"><code>disabled</code></dfn>
  content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p>

  <p>A form control is <dfn id="concept-fe-disabled" title="concept-fe-disabled">disabled</dfn>
  if its <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is
  set, or if it is a descendant of a <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element
  whose <code title="attr-fieldset-disabled"><a href="the-fieldset-element.html#attr-fieldset-disabled">disabled</a></code> attribute
  is set and is <em>not</em> a descendant of that
  <code><a href="the-fieldset-element.html#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.</p>

  <div class="impl">

  <p>A form control that is <a href="#concept-fe-disabled" title="concept-fe-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>

  <p><strong>Constraint validation</strong>: If an element is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, it is <a href="constraints.html#barred-from-constraint-validation">barred from
  constraint validation</a>.</p>

  <p>The <dfn id="dom-fe-disabled" title="dom-fe-disabled"><code>disabled</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> content attribute.</p>

  </div>


  <div class="impl">

  <h5 id="a-form-control's-value"><span class="secno">4.10.19.3 </span>A form control's value</h5>

  <p>Form controls have a <dfn id="concept-fe-value" title="concept-fe-value">value</dfn>
  and a <dfn id="concept-fe-checked" title="concept-fe-checked">checkedness</dfn>. (The latter
  is only used by <code><a href="the-input-element.html#the-input-element">input</a></code> elements.) These are used to
  describe how the user interacts with the control.</p>

  <p>To define the behaviour of constraint validation in the face of
  the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code> attribute,
  <code><a href="the-input-element.html#the-input-element">input</a></code> elements can also have separately defined <dfn id="concept-fe-values" title="concept-fe-values">value<em>s</em></dfn>.</p>

  </div>


  <h5 id="autofocusing-a-form-control"><span class="secno">4.10.19.4 </span>Autofocusing a form control</h5>

  <!-- v2: Apply this to contentEditable elements -->

  <p>The <dfn id="attr-fe-autofocus" title="attr-fe-autofocus"><code>autofocus</code></dfn>
  content attribute allows the author to indicate that a control is to
  be focused as soon as the page is loaded, allowing the user to just
  start typing without having to manually focus the main control.</p>

  <p>The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute is
  a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p>

  <p>There must not be more than one element in the document with the
  <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute
  specified.</p>

  <div class="impl">

  <p>When an element with the <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute specified is
  <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted into a
  document</a>, user agents should run the following steps:</p>

  <ol><li><p>Let <var title="">target</var> be the element's
   <code><a href="dom.html#document">Document</a></code>.</p></li>

   <li><p>If <var title="">target</var> has no <a href="browsers.html#browsing-context">browsing
   context</a>, abort these steps.</p></li>

   <li><p>If <var title="">target</var>'s <a href="browsers.html#browsing-context">browsing
   context</a> has no <a href="browsers.html#top-level-browsing-context">top-level browsing context</a> (e.g.
   it is a <a href="browsers.html#nested-browsing-context">nested browsing context</a> with no <a href="browsers.html#parent-browsing-context">parent
   browsing context</a>), abort these steps.</p></li>

   <li><p>If <var title="">target</var>'s <a href="browsers.html#active-sandboxing-flag-set">active sandboxing
   flag set</a> has the <a href="browsers.html#sandboxed-automatic-features-browsing-context-flag">sandboxed automatic features
   browsing context flag</a>, abort these steps.</p></li>

   <li><p>If <var title="">target</var>'s <a href="browsers.html#origin-0">origin</a> is not
   the <a href="browsers.html#same-origin" title="same origin">same</a> as the
   <a href="browsers.html#origin-0">origin</a> of the <code><a href="dom.html#document">Document</a></code> of the currently
   focused element in <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level
   browsing context</a>, abort these steps.</p></li>

   <li><p>If <var title="">target</var>'s <a href="browsers.html#origin-0">origin</a> is not
   the <a href="browsers.html#same-origin" title="same origin">same</a> as the
   <a href="browsers.html#origin-0">origin</a> of the <a href="browsers.html#active-document">active document</a> of <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>,
   abort these steps.</p></li>

   <li><p>If the user agent has already reached the last step of this
   list of steps in response to an element being <a href="infrastructure.html#insert-an-element-into-a-document" title="insert
   an element into a document">inserted</a> into a
   <code><a href="dom.html#document">Document</a></code> whose <a href="browsers.html#top-level-browsing-context">top-level browsing
   context</a>'s <a href="browsers.html#active-document">active document</a> is the same as <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>'s
   <a href="browsers.html#active-document">active document</a>, abort these steps.</p></li>

   <li><p>If the user has indicated (for example, by starting to type
   in a form control) that he does not wish focus to be changed, then
   optionally abort these steps.</p></li>

   <li><p><a href="webappapis.html#queue-a-task">Queue a task</a> that checks to see if the element
   is <a href="editing.html#focusable">focusable</a>, and if so, runs the <a href="editing.html#focusing-steps">focusing
   steps</a> for that element. User agents may also change the
   scrolling position of the document, or perform some other action
   that brings the element to the user's attention. The <a href="webappapis.html#task-source">task
   source</a> for this task is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
   source</a>.</p></li>

  </ol><p class="note">Focusing the control does not imply that the user
  agent must focus the browser window if it has lost focus.</p>

  <p>The <dfn id="dom-fe-autofocus" title="dom-fe-autofocus"><code>autofocus</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

  </div>

  <div class="example">
   <p>In the following snippet, the text control would be focused when
   the document was loaded.</p>
   <pre>&lt;input maxlength="256" name="q" value="" autofocus&gt;
&lt;input type="submit" value="Search"&gt;</pre>
  </div>


  <h5 id="limiting-user-input-length"><span class="secno">4.10.19.5 </span>Limiting user input length</h5>

  <p>A <dfn id="attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a limit on the number of
  characters a user can input.</p>

  <p>If an element has its <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form
  control <code title="">maxlength</code> attribute</a> specified,
  the attribute's value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a>. If the attribute is specified and applying the
  <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to its value
  results in a number, then that number is the element's <dfn id="maximum-allowed-value-length">maximum
  allowed value length</dfn>. If the attribute is omitted or parsing
  its value results in an error, then there is no <a href="#maximum-allowed-value-length">maximum
  allowed value length</a>.</p>

  <div class="impl">

  <p><strong>Constraint validation</strong>: If an element has a
  <a href="#maximum-allowed-value-length">maximum allowed value length</a>, its <var title="">dirty
  value flag</var> is true, its <a href="#concept-fe-value" title="concept-fe-value">value</a> was last changed by a user
  edit (as opposed to a change made by a script), and the
  <a href="infrastructure.html#code-unit-length">code-unit length</a> of the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> is greater than the element's
  <a href="#maximum-allowed-value-length">maximum allowed value length</a>, then the element is
  <a href="constraints.html#suffering-from-being-too-long">suffering from being too long</a>.</p>

  <p>User agents may prevent the user from causing the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to be set to a value whose
  <a href="infrastructure.html#code-unit-length">code-unit length</a> is greater than the element's
  <a href="#maximum-allowed-value-length">maximum allowed value length</a>.</p>

  </div>



  </body></html>
--- NEW FILE: scripting-1.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.3 Scripting &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="styling.html" title="4.2.7 Styling" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-script-element.html" title="4.3.1 The script 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="styling.html">&#8592; 4.2.7 Styling</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-script-element.html">4.3.1 The script element &#8594;</a>
  </div>

  <h3 id="scripting-1"><span class="secno">4.3 </span>Scripting</h3>

  <p>Scripts allow authors to add interactivity to their documents.</p>

  <p>Authors are encouraged to use declarative alternatives to
  scripting where possible, as declarative mechanisms are often more
  maintainable, and many users disable scripting.</p>

  <div class="example">
   <p>For example, instead of using script to show or hide a section
   to show more details, the <code><a href="the-details-element.html#the-details-element">details</a></code> element could be
   used.</p>
  </div>

  <p>Authors are also encouraged to make their applications degrade
  gracefully in the absence of scripting support.</p>

  <div class="example">
   <p>For example, if an author provides a link in a table header to
   dynamically resort the table, the link could also be made to
   function without scripts by requesting the sorted table from the
   server.</p>
  </div>


  </body></html>
--- NEW FILE: the-abbr-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.9 The abbr element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-dfn-element.html" title="4.6.8 The dfn element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-time-element.html" title="4.6.10 The time 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-dfn-element.html">&#8592; 4.6.8 The dfn element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-time-element.html">4.6.10 The time element &#8594;</a>
  </div>

  <h4 id="the-abbr-element"><span class="secno">4.6.9 </span>The <dfn><code>abbr</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-abbr-title"><a href="#attr-abbr-title">title</a></code> 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-abbr-element">abbr</a></code> element <a href="rendering.html#represents">represents</a> an
  abbreviation or acronym, optionally with its expansion. The <dfn id="attr-abbr-title" title="attr-abbr-title"><code>title</code></dfn> attribute may be
  used to provide an expansion of the abbreviation. The attribute, if
  specified, must contain an expansion of the abbreviation, and
  nothing else.</p>

  <div class="example">
   <p>The paragraph below contains an abbreviation marked up with the
   <code><a href="#the-abbr-element">abbr</a></code> element. This paragraph <a href="the-dfn-element.html#defining-term" title="defining
   term">defines the term</a> "Web Hypertext Application Technology
   Working Group".</p>
   <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/dfn&gt;
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.&lt;/p&gt;</pre>
   <p>An alternative way to write this would be:</p>
   <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;Web Hypertext Application Technology
Working Group&lt;/dfn&gt; (&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.&lt;/p&gt;</pre>
  </div>

  <div class="example">
   <p>This paragraph has two abbreviations. Notice how only one is
   defined; the other, with no expansion associated with it, does not
   use the <code><a href="#the-abbr-element">abbr</a></code> element.</p>
   <pre>&lt;p&gt;The
&lt;abbr title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;
started working on HTML5 in 2004.&lt;/p&gt;</pre>
  </div>

  <div class="example">
   <p>This paragraph links an abbreviation to its definition.</p>
   <pre>&lt;p&gt;The &lt;a href="#whatwg"&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/a&gt;
community does not have much representation from Asia.&lt;/p&gt;</pre>
  </div>

  <div class="example">
   <p>This paragraph marks up an abbreviation without giving an
   expansion, possibly as a hook to apply styles for abbreviations
   (e.g. smallcaps).</p>
   <pre>&lt;p&gt;Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the &lt;abbr&gt;WHATWG&lt;/abbr&gt; issue graph.&lt;/p&gt;</pre>
  </div>

  <p>If an abbreviation is pluralized, the expansion's grammatical
  number (plural vs singular) must match the grammatical number of the
  contents of the element.</p>

  <div class="example">

   <p>Here the plural is outside the element, so the expansion is in
   the singular:</p>

   <pre>&lt;p&gt;Two &lt;abbr title="Working Group"&gt;WG&lt;/abbr&gt;s worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>

   <p>Here the plural is inside the element, so the expansion is in
   the plural:</p>

   <pre>&lt;p&gt;Two &lt;abbr title="Working Groups"&gt;WGs&lt;/abbr&gt; worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>

  </div>

  <p>Abbreviations do not have to be marked up using this element. It
  is expected to be useful in the following cases:</p>

  <ul><li>Abbreviations for which the author wants to give expansions,
   where using the <code><a href="#the-abbr-element">abbr</a></code> element with a <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute is an alternative to
   including the expansion inline (e.g. in parentheses).</li>

   <li>Abbreviations that are likely to be unfamiliar to the
   document's readers, for which authors are encouraged to either mark
   up the abbreviation using an <code><a href="#the-abbr-element">abbr</a></code> element with a <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute or include the expansion
   inline in the text the first time the abbreviation is used.</li>

   <li>Abbreviations whose presence needs to be semantically
   annotated, e.g. so that they can be identified from a style sheet
   and given specific styles, for which the <code><a href="#the-abbr-element">abbr</a></code> element
   can be used without a <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code>
   attribute.</li>

  </ul><p title="note">Providing an expansion in a <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute once will not necessarily
  cause other <code><a href="#the-abbr-element">abbr</a></code> elements in the same document with the
  same contents but without a <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code>
  attribute to behave as if they had the same expansion. Every
  <code><a href="#the-abbr-element">abbr</a></code> element is independent.</p>



<!--DATA--><!--FORK-->




  </body></html>
--- NEW FILE: the-caption-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.2 The caption element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-table-element.html" title="4.9.1 The table element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-colgroup-element.html" title="4.9.3 The colgroup 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-table-element.html">&#8592; 4.9.1 The table element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-colgroup-element.html">4.9.3 The colgroup element &#8594;</a>
  </div>

  <h4 id="the-caption-element"><span class="secno">4.9.2 </span>The <dfn><code>caption</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 child of a <code><a href="the-table-element.html#the-table-element">table</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>, but with no descendant <code><a href="the-table-element.html#the-table-element">table</a></code> elements.</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="htmltablecaptionelement">HTMLTableCaptionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-caption-element">caption</a></code> element <a href="rendering.html#represents">represents</a> the title of the
  <code><a href="the-table-element.html#the-table-element">table</a></code> that is its parent, if it has a parent and that
  is a <code><a href="the-table-element.html#the-table-element">table</a></code> element.</p>

  <div class="impl">

  <p>The <code><a href="#the-caption-element">caption</a></code> element takes part in the <a href="attributes-common-to-td-and-th-elements.html#table-model">table
  model</a>.</p>

  </div>

  <p>When a <code><a href="the-table-element.html#the-table-element">table</a></code> element is the only content in a
  <code><a href="the-figure-element.html#the-figure-element">figure</a></code> element other than the <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code>,
  the <code><a href="#the-caption-element">caption</a></code> element should be omitted in favor of the
  <code><a href="the-figcaption-element.html#the-figcaption-element">figcaption</a></code>.</p>

  <p>A caption can introduce context for a table, making it
  significantly easier to understand.</p>

  <div class="example">

   <p>Consider, for instance, the following table:</p>

   <table class="dice-example"><tr><th>   </th><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th><th> 6
    </th></tr><tr><th> 1 </th><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7
    </td></tr><tr><th> 2 </th><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8
    </td></tr><tr><th> 3 </th><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9
    </td></tr><tr><th> 4 </th><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10
    </td></tr><tr><th> 5 </th><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11
    </td></tr><tr><th> 6 </th><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11 </td><td> 12
   </td></tr></table><p>In the abstract, this table is not clear. However, with a
   caption giving the table's number (for reference in the main prose)
   and explaining its use, it makes more sense:</p>

   <pre>&lt;caption&gt;
&lt;p&gt;Table 1.
&lt;p&gt;This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
&lt;/caption&gt;</pre>

<!--HTML4POLICE--><!--FORK-->

  </div>




  </body></html>
--- NEW FILE: edits-and-paragraphs.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.7.4 Edits and paragraphs &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="attributes-common-to-ins-and-del-elements.html" title="4.7.3 Attributes common to ins and del elements" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="edits-and-lists.html" title="4.7.5 Edits and lists" 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-ins-and-del-elements.html">&#8592; 4.7.3 Attributes common to ins and del elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="edits-and-lists.html">4.7.5 Edits and lists &#8594;</a>
  </div>

  <h4 id="edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</h4>

  <p><i>This section is non-normative.</i></p>
  <p>Since the <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements do not
  affect <a href="content-models.html#paragraph" title="paragraph">paragraphing</a>, it is possible,
  in some cases where paragraphs are <a href="content-models.html#paragraph" title="paragraph">implied</a> (without explicit <code><a href="the-p-element.html#the-p-element">p</a></code>
  elements), for an <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> element to
  span both an entire paragraph or other non-<a href="content-models.html#phrasing-content-1">phrasing
  content</a> elements and part of another paragraph. For
  example:</p>

  <pre>&lt;section&gt;
 &lt;ins&gt;
  &lt;p&gt;
   This is a paragraph that was inserted.
  &lt;/p&gt;
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 &lt;/ins&gt;
 This is a second sentence, which was there all along.
&lt;/section&gt;</pre>

  <p>By only wrapping some paragraphs in <code><a href="the-p-element.html#the-p-element">p</a></code> elements, one
  can even get the end of one paragraph, a whole second paragraph,
  and the start of a third paragraph to be covered by the same
  <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> element (though this is very
  confusing, and not considered good practice):</p>

  <pre class="bad">&lt;section&gt;
 This is the first paragraph. &lt;ins&gt;This sentence was
 inserted.
 &lt;p&gt;This second paragraph was inserted.&lt;/p&gt;
 This sentence was inserted too.&lt;/ins&gt; This is the
 third paragraph in this example.
 &lt;!-- (don't do this) --&gt;
&lt;/section&gt;</pre>

  <p>However, due to the way <a href="content-models.html#paragraph" title="paragraph">implied
  paragraphs</a> are defined, it is not possible to mark up the
  end of one paragraph and the start of the very next one using the
  same <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> element. You instead have
  to use one (or two) <code><a href="the-p-element.html#the-p-element">p</a></code> element(s) and two
  <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> elements, as for example:</p>

  <pre>&lt;section&gt;
 &lt;p&gt;This is the first paragraph. &lt;del&gt;This sentence was
 deleted.&lt;/del&gt;&lt;/p&gt;
 &lt;p&gt;&lt;del&gt;This sentence was deleted too.&lt;/del&gt; That
 sentence needed a separate &amp;lt;del&amp;gt; element.&lt;/p&gt;
&lt;/section&gt;</pre>

  <p>Partly because of the confusion described above, authors are
  strongly encouraged to always mark up all paragraphs with the
  <code><a href="the-p-element.html#the-p-element">p</a></code> element, instead of having <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or
  <code><a href="the-del-element.html#the-del-element">del</a></code> elements that cross <a href="content-models.html#paragraph" title="paragraph">implied
  paragraphs</a> boundaries.</p>


  </body></html>
--- NEW FILE: the-tbody-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.5 The tbody element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-col-element.html" title="4.9.4 The col element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-thead-element.html" title="4.9.6 The thead 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-col-element.html">&#8592; 4.9.4 The col element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-thead-element.html">4.9.6 The thead element &#8594;</a>
  </div>

  <h4 id="the-tbody-element"><span class="secno">4.9.5 </span>The <dfn><code>tbody</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-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code>, <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>, and
   <code><a href="the-thead-element.html#the-thead-element">thead</a></code> elements, but only if there are no
   <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements that are children of the
   <code><a href="the-table-element.html#the-table-element">table</a></code> element.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Zero or more <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements</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="htmltablesectionelement">HTMLTableSectionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-tbody-rows" title="dom-tbody-rows">rows</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-tbody-insertrow" title="dom-tbody-insertRow">insertRow</a>(optional long index);
  void <a href="#dom-tbody-deleterow" title="dom-tbody-deleteRow">deleteRow</a>(long index);
};</pre>
    <p>The <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> interface is also
    used for <code><a href="the-thead-element.html#the-thead-element">thead</a></code> and <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code> elements.</p>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-tbody-element">tbody</a></code> element <a href="rendering.html#represents">represents</a> a <a href="attributes-common-to-td-and-th-elements.html#concept-row-group" title="concept-row-group">block</a> of <a href="attributes-common-to-td-and-th-elements.html#concept-row" title="concept-row">rows</a> that consist of a body of data for
  the parent <code><a href="the-table-element.html#the-table-element">table</a></code> element, if the <code><a href="#the-tbody-element">tbody</a></code>
  element has a parent and it is a <code><a href="the-table-element.html#the-table-element">table</a></code>.</p>

  <div class="impl">

  <p>The <code><a href="#the-tbody-element">tbody</a></code> element takes part in the <a href="attributes-common-to-td-and-th-elements.html#table-model">table
  model</a>.</p>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">tbody</var> . <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code></dt>
   <dd>
    <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements of the table section.</p>
   </dd>

   <dt><var title="">tr</var> = <var title="">tbody</var> . <code title="dom-tbody-insertRow"><a href="#dom-tbody-insertrow">insertRow</a></code>( [ <var title="">index</var> ] )</dt>
   <dd>
    <p>Creates a <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element, inserts it into the table section at the position given by the argument, and returns the <code><a href="the-tr-element.html#the-tr-element">tr</a></code>.</p>
    <p>The position is relative to the rows in the table section. The index &#8722;1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.</p>
    <p>If the given position is less than &#8722;1 or greater than the number of rows, throws an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code> exception.</p>
   </dd>

   <dt><var title="">tbody</var> . <code title="dom-tbody-deleteRow"><a href="#dom-tbody-deleterow">deleteRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Removes the <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element with the given position in the table section.</p>
    <p>The position is relative to the rows in the table section. The index &#8722;1 is equivalent to deleting the last row of the table section.</p>
    <p>If the given position is less than &#8722;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code> exception.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-tbody-rows" title="dom-tbody-rows"><code>rows</code></dfn> attribute
  must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at the element,
  whose filter matches only <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements that are children
  of the element.</p>

  <p>The <dfn id="dom-tbody-insertrow" title="dom-tbody-insertRow"><code>insertRow(<var title="">index</var>)</code></dfn> method must, when invoked on an
  element <var title="">table section</var>, act as follows:</p>

  <p>If <var title="">index</var> is less than &#8722;1 or greater than the
  number of elements in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code>
  collection, the method must throw an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &#8722;1, or
  equal to the number of items in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, the method must
  create a <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element, append it to the element <var title="">table section</var>, and return the newly created
  <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element,
  insert it as a child of the <var title="">table section</var>
  element, immediately before the <var title="">index</var>th
  <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, and finally must
  return the newly created <code><a href="the-tr-element.html#the-tr-element">tr</a></code> element.</p>

  <p>The <dfn id="dom-tbody-deleterow" title="dom-tbody-deleteRow"><code>deleteRow(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, the method must
  instead throw an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code> exception.</p>

  </div>
<!--TOPIC:HTML-->


  </body></html>
--- NEW FILE: the-td-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.9 The td element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-tr-element.html" title="4.9.8 The tr element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-th-element.html" title="4.9.10 The th 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-tr-element.html">&#8592; 4.9.8 The tr element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-th-element.html">4.9.10 The th element &#8594;</a>
  </div>

  <h4 id="the-td-element"><span class="secno">4.9.9 </span>The <dfn><code>td</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="headings-and-sections.html#sectioning-root">Sectioning root</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 a <code><a href="the-tr-element.html#the-tr-element">tr</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>
   <dd><code title="attr-tdth-colspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-colspan">colspan</a></code></dd>
   <dd><code title="attr-tdth-rowspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-rowspan">rowspan</a></code></dd>
   <dd><code title="attr-tdth-headers"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-headers">headers</a></code></dd>
   <!-- v2 char, to specify the decimal character used in numeric cells -->
   <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="htmltabledatacellelement">HTMLTableDataCellElement</dfn> : <a href="attributes-common-to-td-and-th-elements.html#htmltablecellelement">HTMLTableCellElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-td-element">td</a></code> element <a href="rendering.html#represents">represents</a> a data <a href="attributes-common-to-td-and-th-elements.html#concept-cell" title="concept-cell">cell</a> in a table.</p>

  <div class="impl">

  <p>The <code><a href="#the-td-element">td</a></code> element and its <code title="attr-tdth-colspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-colspan">colspan</a></code>, <code title="attr-tdth-rowspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-rowspan">rowspan</a></code>, and <code title="attr-tdth-headers"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-headers">headers</a></code> attributes take part in the
  <a href="attributes-common-to-td-and-th-elements.html#table-model">table model</a>.</p>

  </div>


  </body></html>
--- NEW FILE: spec.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; }
[...1309 lines suppressed...]
   <li><a href="obsolete.html#requirements-for-implementations"><span class="secno">11.3 </span>Requirements for implementations</a>
    <ol class="toc"><li><a href="obsolete.html#the-applet-element"><span class="secno">11.3.1 </span>The <code>applet</code> element</a></li>
     <li><a href="obsolete.html#the-marquee-element-0"><span class="secno">11.3.2 </span>The <code>marquee</code> element</a></li>
     <li><a href="obsolete.html#frames"><span class="secno">11.3.3 </span>Frames</a></li>
     <li><a href="obsolete.html#other-elements,-attributes-and-apis"><span class="secno">11.3.4 </span>Other elements, attributes and APIs</a></li></ol></li></ol></li>
 <li><a href="iana.html#iana"><span class="secno">12 </span>IANA considerations</a>
  <ol class="toc"><li><a href="iana.html#text/html"><span class="secno">12.1 </span><code>text/html</code></a></li>
   <li><a href="iana.html#multipart/x-mixed-replace"><span class="secno">12.2 </span><code>multipart/x-mixed-replace</code></a></li>
   <li><a href="iana.html#application/xhtml+xml"><span class="secno">12.3 </span><code>application/xhtml+xml</code></a></li>
   <li><a href="iana.html#application/x-www-form-urlencoded"><span class="secno">12.4 </span><code>application/x-www-form-urlencoded</code></a></li>
   <li><a href="iana.html#text/cache-manifest"><span class="secno">12.5 </span><code>text/cache-manifest</code></a></li>
   <li><a href="iana.html#web+-scheme-prefix"><span class="secno">12.6 </span><code>web+</code> scheme prefix</a></li></ol></li>
 <li><a class="no-num" href="index.html#index">Index</a>
  <ol class="toc"><li><a class="no-num" href="index.html#elements-1">Elements</a></li>
   <li><a class="no-num" href="index.html#element-content-categories">Element content categories</a></li>
   <li><a class="no-num" href="index.html#attributes-1">Attributes</a></li>
   <li><a class="no-num" href="index.html#interfaces">Interfaces</a></li>
   <li><a class="no-num" href="index.html#events-0">Events</a></li></ol></li>
 <li><a class="no-num" href="references.html#references">References</a></li>
 <li><a class="no-num" href="acknowledgements.html#acknowledgements">Acknowledgements</a></li></ol><!--end-toc--></body></html>
--- NEW FILE: system-state-and-capabilities.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>6.5 System state and capabilities &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1195 lines suppressed...]
    <a href="urls.html#url">URL</a>, if any. For search engines registered using
    OpenSearch description documents, the <a href="urls.html#url">URL</a> of the
    search engine corresponds to the URL given in a <code title="">Url</code> element whose <code title="">rel</code>
    attribute is "<code title="">results</code>" (the default). <a href="references.html#refsOPENSEARCH">[OPENSEARCH]</a></p></li>

    <li><p>If <var title="">search engines</var> is empty, return 0
    and abort these steps.</p></li>

    <li><p>If the user's default search engine (as determined by the
    user agent) is one of the search engines in <var title="">search
    engines</var>, then return 2 and abort these steps.</p></li>

    <li><p>Return 1.</p></li>

   </ol></div>
<!--TOPIC:HTML-->



  </body></html>
--- NEW FILE: browsers.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>5 Loading Web pages &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...2704 lines suppressed...]
  sandboxing flag set</dfn>. When a <a href="#browsing-context">browsing context</a> is
  created, its <a href="#popup-sandboxing-flag-set">popup sandboxing flag set</a> must be empty.
  It is populated by <a href="#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>.</p>

  <p>Every <a href="#nested-browsing-context">nested browsing context</a> has an
  <dfn id="iframe-sandboxing-flag-set"><code>iframe</code> sandboxing flag set</dfn>, which is a
  <a href="#sandboxing-flag-set">sandboxing flag set</a>. Which flags in a <a href="#nested-browsing-context">nested
  browsing context</a>'s <a href="#iframe-sandboxing-flag-set"><code>iframe</code> sandboxing flag
  set</a> are set at any particular time is determined by the
  <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> element's <code title="attr-iframe-sandbox"><a href="the-iframe-element.html#attr-iframe-sandbox">sandbox</a></code> attribute.</p>

  <p>Every <code><a href="dom.html#document">Document</a></code> has an <dfn id="active-sandboxing-flag-set">active sandboxing flag
  set</dfn>, which is a <a href="#sandboxing-flag-set">sandboxing flag set</a>. When the
  <code><a href="dom.html#document">Document</a></code> is created, its <a href="#active-sandboxing-flag-set">active sandboxing flag
  set</a> must be empty. It is populated by the <a href="history.html#navigate" title="navigate">navigation algorithm</a>.</p>



  </body></html>
--- NEW FILE: media-elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.10 Media elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...7078 lines suppressed...]
  remove media elements from the <code><a href="#mediacontroller">MediaController</a></code>'s list
  of <a href="#slaved-media-elements">slaved media elements</a>, even while these tracks are
  playing. How smoothly the media plays back in such situations is
  another quality-of-implementation issue.</p>

  <hr><p>When a <a href="#media-element">media element</a> that is paused is <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a document">removed from a
  document</a> and not reinserted before the next time the
  <a href="webappapis.html#event-loop">event loop</a> spins, implementations that are resource
  constrained are encouraged to take that opportunity to release all
  hardware resources (like video planes, networking resources, and
  data buffers) used by the <a href="#media-element">media element</a>. (User agents
  still have to keep track of the playback position and so forth,
  though, in case playback is later restarted.)</p>

  </div>
  


<!--TOPIC:Canvas-->
  </body></html>
--- NEW FILE: the-base-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.2.3 The base element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-title-element.html" title="4.2.2 The title element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-link-element.html" title="4.2.4 The link 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-title-element.html">&#8592; 4.2.2 The title element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-link-element.html">4.2.4 The link element &#8594;</a>
  </div>

  <h4 id="the-base-element"><span class="secno">4.2.3 </span>The <dfn><code>base</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-base-element">base</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-base-href"><a href="#attr-base-href">href</a></code></dd>
   <dd><code title="attr-base-target"><a href="#attr-base-target">target</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="htmlbaseelement">HTMLBaseElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-base-href" title="dom-base-href">href</a>;
           attribute DOMString <a href="#dom-base-target" title="dom-base-target">target</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-base-element">base</a></code> element allows authors to specify the
  <a href="urls.html#document-base-url">document base URL</a> for the purposes of <a href="urls.html#resolve-a-url" title="resolve a url">resolving relative URLs</a>, and the name
  of the default <a href="browsers.html#browsing-context">browsing context</a> for the purposes of
  <a href="links.html#following-hyperlinks-0">following hyperlinks</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> any content beyond this
  information.</p>

  <p>There must be no more than one <code><a href="#the-base-element">base</a></code> element per
  document.</p>

  <p>A <code><a href="#the-base-element">base</a></code> element must have either an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, or both.</p>

  <p>The <dfn id="attr-base-href" title="attr-base-href"><code>href</code></dfn> content
  attribute, if specified, must contain a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL potentially
  surrounded by spaces</a>.</p>

  <p>A <code><a href="#the-base-element">base</a></code> element, if it has an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, must come before any
  other elements in the tree that have attributes defined as taking
  <a href="urls.html#url" title="URL">URLs</a>, except the <code><a href="the-html-element.html#the-html-element">html</a></code> element
  (its <code title="attr-html-manifest"><a href="the-html-element.html#attr-html-manifest">manifest</a></code> attribute
  isn't affected by <code><a href="#the-base-element">base</a></code> elements).</p>

  <div class="impl">

  <p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
  with <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attributes, all but the
  first are ignored.</p>

  </div>

  <p>The <dfn id="attr-base-target" title="attr-base-target"><code>target</code></dfn>
  attribute, if specified, must contain a <a href="browsers.html#valid-browsing-context-name-or-keyword">valid browsing context
  name or keyword</a>, which specifies which <a href="browsers.html#browsing-context">browsing
  context</a> is to be used as the default when <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> and <a href="the-form-element.html#the-form-element" title="form">forms</a> in the <code><a href="dom.html#document">Document</a></code> cause <a href="history.html#navigate" title="navigate">navigation</a>.</p>

  <p>A <code><a href="#the-base-element">base</a></code> element, if it has a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, must come before
  any elements in the tree that represent <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p>

  <div class="impl">

  <p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
  with <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attributes, all but
  the first are ignored.</p>

  <p>The <dfn id="dom-base-href" title="dom-base-href"><code>href</code></dfn> and <dfn id="dom-base-target" title="dom-base-target"><code>target</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name.</p>

  </div>

  <div class="example">

   <p>In this example, a <code><a href="#the-base-element">base</a></code> element is used to set the
   <a href="urls.html#document-base-url">document base URL</a>:</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;This is an example for the &amp;lt;base&amp;gt; element&lt;/title&gt;
        &lt;base href="http://www.example.com/news/index.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Visit the &lt;a href="archives.html"&gt;archives&lt;/a&gt;.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>

  </div>




  </body></html>
--- NEW FILE: the-menu-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.11.4 The menu element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-command-element.html" title="4.11.3 The command element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="commands.html" title="4.11.5 Commands" 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-command-element.html">&#8592; 4.11.3 The command element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="commands.html">4.11.5 Commands &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="the-menu-element.html#the-menu-element"><span class="secno">4.11.4 </span>The <code>menu</code> element</a>
      <ol><li><a href="the-menu-element.html#menus-intro"><span class="secno">4.11.4.1 </span>Introduction</a></li><li><a href="the-menu-element.html#building-menus-and-toolbars"><span class="secno">4.11.4.2 </span>Building menus and toolbars</a></li><li><a href="the-menu-element.html#context-menus"><span class="secno">4.11.4.3 </span>Context menus</a></li><li><a href="the-menu-element.html#toolbars"><span class="secno">4.11.4.4 </span>Toolbars</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="the-menu-element"><span class="secno">4.11.4 </span>The <dfn id="menus"><code>menu</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>If the element's <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute is in the <a href="#toolbar-state" title="toolbar state">toolbar</a> state: <a href="content-models.html#interactive-content-0">Interactive content</a>.</dd>
   <dd>If the element's <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute is in the <a href="#toolbar-state" title="toolbar state">toolbar</a> state or the <a href="#list-state" title="list state">list</a> state: <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: Zero or more <code><a href="the-li-element.html#the-li-element">li</a></code> elements.</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>
   <dd><code title="attr-menu-type"><a href="#attr-menu-type">type</a></code></dd>
   <dd><code title="attr-menu-label"><a href="#attr-menu-label">label</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="htmlmenuelement">HTMLMenuElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-menu-type" title="dom-menu-type">type</a>;
           attribute DOMString <a href="#dom-menu-label" title="dom-menu-label">label</a>;
};</pre>
  </dd></dl><!--TOPIC:HTML--><p>The <code><a href="#the-menu-element">menu</a></code> element represents a list of commands.</p>

  <!-- v2 idea: <menu> should get an icon, like <command> -->

  <p>The <dfn id="attr-menu-type" title="attr-menu-type"><code>type</code></dfn> attribute
  is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> indicating the kind of menu
  being declared. The attribute has three states. The <code title="attr-menu-type-context">context</code> keyword maps to the
  <dfn id="context-menu-state" title="context menu state">context menu</dfn> state, in which
  the element is declaring a context menu. The <code title="attr-menu-type-toolbar">toolbar</code> keyword maps to the
  <dfn id="toolbar-state" title="toolbar state">toolbar</dfn> state, in which the
  element is declaring a toolbar. The attribute may also be
  omitted. The <i>missing value default</i> is the <dfn id="list-state" title="list
  state">list</dfn> state, which indicates that the element is merely
  a list of commands that is neither declaring a context menu nor
  defining a toolbar.</p>

  <p>If a <code><a href="#the-menu-element">menu</a></code> element's <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute is in the <a href="#context-menu-state" title="context menu state">context menu</a> state, then the
  element <a href="rendering.html#represents">represents</a> the commands of a context menu, and
  the user can only interact with the commands if that context menu is
  activated.</p>

  <p>If a <code><a href="#the-menu-element">menu</a></code> element's <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute is in the <a href="#toolbar-state" title="toolbar state">toolbar</a> state, then the element
  <a href="rendering.html#represents">represents</a> a list of active commands that the user can
  immediately interact with.</p>

  <p>If a <code><a href="#the-menu-element">menu</a></code> element's <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute is in the <a href="#list-state" title="list state">list</a> state, then the element either
  <a href="rendering.html#represents">represents</a> an unordered list of items (each represented
  by an <code><a href="the-li-element.html#the-li-element">li</a></code> element), each of which represents a command
  that the user can perform or activate, or, if the element has no
  <code><a href="the-li-element.html#the-li-element">li</a></code> element children, <a href="content-models.html#flow-content-1">flow content</a>
  describing available commands.</p>

  <p>The <dfn id="attr-menu-label" title="attr-menu-label"><code>label</code></dfn>
  attribute gives the label of the menu. It is used by user agents to
  display nested menus in the UI. For example, a context menu
  containing another menu would use the nested menu's <code title="attr-menu-label"><a href="#attr-menu-label">label</a></code> attribute for the submenu's
  menu label.</p>

  <div class="impl">

  <p>The <dfn id="dom-menu-type" title="dom-menu-type"><code>type</code></dfn> and <dfn id="dom-menu-label" title="dom-menu-label"><code>label</code></dfn> IDL attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  </div>



  <h5 id="menus-intro"><span class="secno">4.11.4.1 </span>Introduction</h5>

  <p><i>This section is non-normative.</i></p>
  <p>The <code><a href="#the-menu-element">menu</a></code> element is used to define context menus and
  toolbars.</p>

  <p>For example, the following represents a toolbar with three menu
  buttons on it, each of which has a dropdown menu with a series of
  options:</p>

  <pre>&lt;menu type="toolbar"&gt;
 &lt;li&gt;
  &lt;menu label="File"&gt;
   &lt;button type="button" onclick="fnew()"&gt;New...&lt;/button&gt;
   &lt;button type="button" onclick="fopen()"&gt;Open...&lt;/button&gt;
   &lt;button type="button" onclick="fsave()"&gt;Save&lt;/button&gt;
   &lt;button type="button" onclick="fsaveas()"&gt;Save as...&lt;/button&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;menu label="Edit"&gt;
   &lt;button type="button" onclick="ecopy()"&gt;Copy&lt;/button&gt;
   &lt;button type="button" onclick="ecut()"&gt;Cut&lt;/button&gt;
   &lt;button type="button" onclick="epaste()"&gt;Paste&lt;/button&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;menu label="Help"&gt;
   &lt;li&gt;&lt;a href="help.html"&gt;Help&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/menu&gt;
 &lt;/li&gt;
&lt;/menu&gt;</pre>

  <p>In a supporting user agent, this might look like this:</p>

  <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height="101" src="images/sample-toolbar-1.png" width="303"></p>

  <p>In a legacy user agent, the above would look like a bulleted list
  with three items, the first of which has four buttons, the second of
  which has three, and the third of which has two nested bullet points
  with two items consisting of links.</p>

  <hr><p>The following implements a similar toolbar, with a single button
  whose values, when selected, redirect the user to Web sites.</p>

  <pre>&lt;form action="redirect.cgi"&gt;
 &lt;menu type="toolbar"&gt;
  &lt;label for="goto"&gt;Go to...&lt;/label&gt;
  &lt;menu label="Go"&gt;
   &lt;select id="goto"<!--
           onchange="if (this.options[this.selectedIndex].value)
                     window.location = this.options[this.selectedIndex].value"-->&gt;
    &lt;option value="" selected="selected"&gt; Select site: &lt;/option&gt;
    &lt;option value="http://www.apple.com/"&gt; Apple &lt;/option&gt;
    &lt;option value="http://www.mozilla.org/"&gt; Mozilla &lt;/option&gt;
    &lt;option value="http://www.opera.com/"&gt; Opera &lt;/option&gt;
   &lt;/select&gt;
   &lt;span&gt;&lt;input type="submit" value="Go"&gt;&lt;/span&gt;
  &lt;/menu&gt;
 &lt;/menu&gt;
&lt;/form&gt;</pre>

  <p>The behavior in supporting user agents is similar to the example
  above, but here the legacy behavior consists of a single
  <code><a href="the-select-element.html#the-select-element">select</a></code> element with a submit button. The submit button
  doesn't appear in the toolbar, because it is not a child of the
  <code><a href="#the-menu-element">menu</a></code> element or of its <code><a href="the-li-element.html#the-li-element">li</a></code> children.</p>



  <div class="impl">

  <h5 id="building-menus-and-toolbars"><span class="secno">4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>

  <p>A menu (or toolbar) consists of a list of zero or more of the
  following components:</p>

  <ul class="brief"><li><a href="commands.html#concept-command" title="concept-command">Commands</a>, which can be marked as default commands</li>
   <li>Separators</li>
   <li>Other menus (which allows the list to be nested)</li>
  </ul><p>The list corresponding to a particular <code><a href="#the-menu-element">menu</a></code> element
  is built by iterating over its child nodes. For each child node in
  <a href="infrastructure.html#tree-order">tree order</a>, the required behavior depends on what the
  node is, as follows:</p>

  <dl class="switch"><dt>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a></dt>

   <dd>Append the command to the menu, respecting its <a href="commands.html#concept-facet" title="concept-facet">facets</a><!-- we might need to be
   explicit about what this means for each facet, if testing shows
   this isn't well-implemented. e.g.: If there's an Icon facet for the
   command, it should be <span title="fetch">fetched</span> (this
   would be http-origin privacy-sensitive), and then that image should
   be associated with the command, such that each command only has its
   image fetched once, to prevent changes to the base URL from having
   effects after the image has been fetched once. (no need to resolve
   the Icon facet, it's an absolute URL) -->. <!--If the element is a
   <code>command</code> element with a <code
   title="attr-command-default">default</code> attribute, mark the
   command as being a default command.--></dd>


   <dt>An <code><a href="the-hr-element.html#the-hr-element">hr</a></code> element</dt>
   <dt>An <code><a href="the-option-element.html#the-option-element">option</a></code> element that has a <code title="attr-option-value"><a href="the-option-element.html#attr-option-value">value</a></code> attribute set to the empty
   string, and has a <code title="attr-option-disabled"><a href="the-option-element.html#attr-option-disabled">disabled</a></code> attribute, and whose
   <code><a href="infrastructure.html#textcontent">textContent</a></code> consists of a string of one or more
   hyphens (U+002D HYPHEN-MINUS)</dt>

   <dd>Append a separator to the menu.</dd>


   <dt>An <code><a href="the-li-element.html#the-li-element">li</a></code> element</dt>
   <dt>A <code><a href="the-label-element.html#the-label-element">label</a></code> element</dt>

   <dd>Iterate over the children of the element.</dd>


   <dt>A <code><a href="#the-menu-element">menu</a></code> element with no <code title="attr-menu-label"><a href="#attr-menu-label">label</a></code> attribute</dt>
   <dt>A <code><a href="the-select-element.html#the-select-element">select</a></code> element</dt>

   <dd>Append a separator to the menu, then iterate over the children
   of the <code><a href="#the-menu-element">menu</a></code> or <code><a href="the-select-element.html#the-select-element">select</a></code> element, then
   append another separator.</dd>

   <!-- v2: we might want to support <select> in <label> as giving a named submenu -->


   <dt>A <code><a href="#the-menu-element">menu</a></code> element with a <code title="attr-menu-label"><a href="#attr-menu-label">label</a></code> attribute</dt>
   <dt>An <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element with a <code title="attr-menu-label"><a href="#attr-menu-label">label</a></code> attribute</dt>

   <dd>Append a submenu to the menu, using the value of the element's
   <code title="">label</code> attribute as the label of the menu. The
   submenu must be constructed by taking the element and creating a
   new menu for it using the complete process described in this
   section.</dd>


   <dt>Any other node</dt>

   <dd><a href="infrastructure.html#ignore">Ignore</a> the node.</dd>

  </dl><p>Once all the nodes have been processed as described above, the
  user agent must the post-process the menu as follows:</p>

  <ol><li>Except for separators, any menu item with no label, or whose
   label is the empty string, must be removed.</li>

   <li>Any sequence of two or more separators in a row must be
   collapsed to a single separator.</li>

   <li>Any separator at the start or end of the menu must be
   removed.</li>

  </ol></div>




  <h5 id="context-menus"><span class="secno">4.11.4.3 </span><dfn>Context menus</dfn></h5>

  <p>The <dfn id="attr-contextmenu" title="attr-contextmenu"><code>contextmenu</code></dfn>
  attribute gives the element's <a href="#context-menus" title="context menus">context
  menu</a>. The value must be the <a href="infrastructure.html#concept-id" title="concept-id">ID</a> of a <code><a href="#the-menu-element">menu</a></code> element in the
  DOM. <span class="impl">If the node that would be obtained by
  invoking the <code title="dom-Document-getElementById"><a href="infrastructure.html#dom-document-getelementbyid">getElementById()</a></code> method
  using the attribute's value as the only argument is null or not a
  <code><a href="#the-menu-element">menu</a></code> element, then the element has no assigned context
  menu. Otherwise, the element's assigned context menu is the element
  so identified.</span></p>

  <div class="impl">

  <p>When an element's context menu is requested (e.g. by the user
  right-clicking the element, or pressing a context menu key), the
  user agent must apply the appropriate rules from the following
  list:</p>

  <dl class="switch"><dt>If the user requested a context menu using a pointing device</dt>

   <dd><p>The user agent must fire an event with the name <code title="event-contextmenu">contextmenu</code>, that bubbles and is
   cancelable, and that uses the <code><a href="infrastructure.html#mouseevent">MouseEvent</a></code> interface, at
   the element for which the menu was requested. The context
   information of the event must be initialized to the same values as
   the last <code><a href="infrastructure.html#mouseevent">MouseEvent</a></code> user interaction event that was
   fired as part of the gesture that that was interpreted as a request
   for the context menu.</p></dd>

   <dt>Otherwise</dt>

   <dd><p>The user agent must <a href="webappapis.html#fire-a-synthetic-mouse-event" title="fire a synthetic mouse
   event">fire a synthetic mouse event named <code title="event-contextmenu">contextmenu</code></a> that bubbles
   and is cancelable at the element for which the menu was
   requested.</p></dd>

  </dl><p class="note">Typically, therefore, the firing of the <code title="event-contextmenu">contextmenu</code> event will be the
  default action of a <code title="mouseup">mouseup</code> or <code title="event-keyup">keyup</code> event. The exact sequence of events
  is UA-dependent, as it will vary based on platform conventions.</p>

  <p>The default action of the <code title="event-contextmenu">contextmenu</code> event depends on
  whether the element or one of its ancestors has a context menu
  assigned (using the <code title="attr-contextmenu"><a href="#attr-contextmenu">contextmenu</a></code> attribute) or not. If
  there is no context menu assigned, the default action must be for
  the user agent to show its default context menu, if it has one.</p>

  <p>If the element or one of its ancestors <em>does</em> have a
  context menu assigned, then the user agent must <a href="webappapis.html#fire-a-simple-event">fire a simple
  event</a> named <code title="event-show">show</code> at the
  <code><a href="#the-menu-element">menu</a></code> element of the context menu of the nearest
  ancestor (including the element itself) with one assigned.</p>
  <!-- v2: include modifier key information -->

  <p>The default action of <em>this</em> event is that the user agent
  must show a context menu <a href="#building-menus-and-toolbars" title="building menus and
  toolbars">built</a> from the <code><a href="#the-menu-element">menu</a></code> element.</p>

  <p>The user agent may also provide access to its default context
  menu, if any, with the context menu shown. For example, it could
  merge the menu items from the two menus together, or provide the
  page's context menu as a submenu of the default menu.</p>

  <p>If the user dismisses the menu without making a selection,
  nothing in particular happens.</p>

  <p>If the user selects a menu item that represents a <a href="commands.html#concept-command" title="concept-command">command</a>, then the UA must invoke
  that command's <a href="commands.html#command-facet-action" title="command-facet-Action">Action</a>.</p>

  <p>Context menus must not, while being shown, reflect changes in the
  DOM; they are constructed as the default action of the <code title="event-show">show</code> event and must remain as constructed
  until dismissed.</p>

  <p>User agents may provide means for bypassing the context menu
  processing model, ensuring that the user can always access the UA's
  default context menus. For example, the user agent could handle
  right-clicks that have the Shift key depressed in such a way that it
  does not fire the <code title="event-contextmenu">contextmenu</code>
  event and instead always shows the default context menu.</p>

  <p>The <dfn id="dom-contextmenu" title="dom-contextMenu"><code>contextMenu</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-contextmenu"><a href="#attr-contextmenu">contextmenu</a></code> content attribute.</p>

  </div>

  <div class="example">

   <p>Here is an example of a context menu for an input control:</p>

   <pre>&lt;form name="npc"&gt;
 &lt;label&gt;Character name: &lt;input name=char type=text contextmenu=namemenu required&gt;&lt;/label&gt;
 &lt;menu type=context id=namemenu&gt;
  &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"&gt;
  &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"&gt;
 &lt;/menu&gt;
&lt;/form&gt;</pre>

   <p>This adds two items to the control's context menu, one called
   "Pick random name", and one called "Prefill other fields based on
   name". They invoke scripts that are not shown in the example
   above.</p>

  </div>



  <div class="impl">

  <h5 id="toolbars"><span class="secno">4.11.4.4 </span><dfn>Toolbars</dfn></h5>

  <p>When a <code><a href="#the-menu-element">menu</a></code> element has a <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code> attribute in the <a href="#toolbar-state" title="toolbar state">toolbar</a> state, then the user agent
  must <a href="#building-menus-and-toolbars" title="building menus and toolbars">build</a> the
  menu for that <code><a href="#the-menu-element">menu</a></code> element, and use the result in the
  rendering.</p>

  <p>The user agent must reflect changes made to the
  <code><a href="#the-menu-element">menu</a></code>'s DOM, by immediately <a href="#building-menus-and-toolbars" title="building menus
  and toolbars">rebuilding</a> the menu.</p>

  </div>



  </body></html>
--- NEW FILE: styling.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.2.7 Styling &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-style-element.html" title="4.2.6 The style element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="scripting-1.html" title="4.3 Scripting" 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-style-element.html">&#8592; 4.2.6 The style element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="scripting-1.html">4.3 Scripting &#8594;</a>
  </div>

  <h4 id="styling"><span class="secno">4.2.7 </span><dfn title="styling processing model">Styling</dfn></h4>

  <p>The <code><a href="the-link-element.html#the-link-element">link</a></code> and <code><a href="the-style-element.html#the-style-element">style</a></code> elements can provide
  styling information for the user agent to use when rendering the
  document. The CSS and CSSOM specifications specify what styling
  information is to be used by the user agent and how it is to be
  used. <a href="references.html#refsCSS">[CSS]</a> <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <p>The <code><a href="the-style-element.html#the-style-element">style</a></code> and <code><a href="the-link-element.html#the-link-element">link</a></code> elements implement
  the <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <div class="impl">

  <p>For <code><a href="the-style-element.html#the-style-element">style</a></code> elements, if the user agent does not
  support the specified styling language, then the <code title="dom-LinkStyle-sheet"><a href="infrastructure.html#dom-linkstyle-sheet">sheet</a></code> attribute of the element's
  <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface must return null. Similarly,
  <code><a href="the-link-element.html#the-link-element">link</a></code> elements that do not represent <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource links that contribute to
  the styling processing model</a> (i.e. that do not have a <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword in their <code title="attr-link-rel"><a href="the-link-element.html#attr-link-rel">rel</a></code> attribute), or for which <a href="links.html#the-link-is-an-alternative-stylesheet">the
  link is an alternative stylesheet</a> but whose <code title="dom-title"><a href="global-attributes.html#dom-title">title</a></code> content attribute is absent or empty,
  must have their <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface's <code title="dom-LinkStyle-sheet"><a href="infrastructure.html#dom-linkstyle-sheet">sheet</a></code> attribute return null.</p>

  <p>Otherwise, the <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface's <code title="dom-LinkStyle-sheet"><a href="infrastructure.html#dom-linkstyle-sheet">sheet</a></code> attribute must return a
  <code><a href="infrastructure.html#stylesheet">StyleSheet</a></code> object with the following properties: <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <dl><dt>The style sheet type</dt>

   <dd><p>The style sheet type must be the same as the style's specified
   type. For <code><a href="the-style-element.html#the-style-element">style</a></code> elements, this is the same as the
   <code title="attr-style-type"><a href="the-style-element.html#attr-style-type">type</a></code> content attribute's
   value, or <code title="">text/css</code> if that is omitted. For
   <code><a href="the-link-element.html#the-link-element">link</a></code> elements, this is the <a href="urls.html#content-type" title="Content-Type">Content-Type metadata of the specified
   resource</a>.</p></dd>

   <dt>The style sheet location</dt>

   <dd><p>For <code><a href="the-link-element.html#the-link-element">link</a></code> elements, the location must be the
   result of <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the
   <a href="urls.html#url">URL</a> given by the element's <code title="attr-link-href"><a href="the-link-element.html#attr-link-href">href</a></code> content attribute, relative to
   the element, or the empty string if that fails. For
   <code><a href="the-style-element.html#the-style-element">style</a></code> elements, there is no location.</p></dd> <!--
   note that this might not match the style sheet URL, if the base URL
   has changed for instance -->

   <dt>The style sheet media</dt>

   <dd><p>The media must be the same as the value of the element's
   <code title="">media</code> content attribute, or the empty string,
   if the attribute is omitted.</p></dd>

   <dt>The style sheet title</dt>

   <dd><p>The title must be the same as the value of the element's
   <code title="dom-title"><a href="global-attributes.html#dom-title">title</a></code> content attribute, if the
   attribute is present and has a non-empty value. If the attribute is
   absent or its value is the empty string, then the style sheet does
   not have a title (it is the empty string). The title is used for
   defining <a href="infrastructure.html#alternative-style-sheet-sets">alternative style sheet sets</a>.</p></dd>

   <dt>The style sheet alternate flag</dt>

   <dd><p>For <code><a href="the-link-element.html#the-link-element">link</a></code> elements, true if <a href="links.html#the-link-is-an-alternative-stylesheet">the link is an
   alternative stylesheet</a>. In all other cases, false.</p></dd>

<!--
   <dt>The style sheet disabled flag</dt>
   (not included, because I assume CSSOM will change to not require
   this spec to initialise the value, but will instead initialise it
   based on the other values)
-->

  </dl><p>The same object must be returned each time.</p>

  <p>The <dfn id="dom-linkstyle-disabled" title="dom-LinkStyle-disabled"><code>disabled</code></dfn> IDL
  attribute on <code><a href="the-link-element.html#the-link-element">link</a></code> and <code><a href="the-style-element.html#the-style-element">style</a></code> elements must
  return false and do nothing on setting, if the <code title="dom-linkstyle-sheet"><a href="infrastructure.html#dom-linkstyle-sheet">sheet</a></code> attribute of their
  <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface is null. Otherwise, it must return
  the value of the <code><a href="infrastructure.html#stylesheet">StyleSheet</a></code> interface's <code title="dom-stylesheet-disabled"><a href="infrastructure.html#dom-stylesheet-disabled">disabled</a></code> attribute on
  getting, and forward the new value to that same attribute on
  setting.</p>

  <!-- [CSSOM] covers the following: the term "alternative style sheet
  sets", the term "default style sheet set", preferred stylesheets,
  alternative stylesheets, persistent stylesheets, ordering of
  stylesheets, dynamic additions/removals, window.styleSheets, style
  sheets given by HTTP Link: headers, and the alternative style sheet
  API -->

  <p id="alternate-style-sheets">The rules for handling alternative
  style sheets are defined in the CSS object model specification. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <hr><p>Style sheets, whether added by a <code><a href="the-link-element.html#the-link-element">link</a></code> element, a
  <code><a href="the-style-element.html#the-style-element">style</a></code> element, an <code>&lt;?xml-stylesheet&gt;</code> PI,
  an HTTP <code title="http-link">Link:</code> header, or some other
  mechanism, have a <dfn id="style-sheet-ready">style sheet ready</dfn> flag, which is
  initially unset.</p>

  <p>When a style sheet is ready to be applied, its <a href="#style-sheet-ready">style sheet
  ready</a> flag must be set. If the style sheet referenced no
  other resources (e.g. it was an internal style sheet given by a
  <code><a href="the-style-element.html#the-style-element">style</a></code> element with no <code title="">@import</code>
  rules), then the style rules must be synchronously made available to
  script; otherwise, the style rules must only be made available to
  script once the <a href="webappapis.html#event-loop">event loop</a> reaches its "update the
  rendering" step.</p>

  <p>A style sheet in the context of the <code><a href="dom.html#document">Document</a></code> of an
  <a href="parsing.html#html-parser">HTML parser</a> or <a href="the-xhtml-syntax.html#xml-parser">XML parser</a> is said to be
  <dfn id="a-style-sheet-that-is-blocking-scripts">a style sheet that is blocking scripts</dfn> if the element was
  created by that <code><a href="dom.html#document">Document</a></code>'s parser, and the element is
  either a <code><a href="the-style-element.html#the-style-element">style</a></code> element or a <code><a href="the-link-element.html#the-link-element">link</a></code> element
  that was an <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource link that
  contributes to the styling processing model</a> when the element
  was created by the parser, and the element's style sheet was enabled
  when the element was created by the parser, and the element's
  <a href="#style-sheet-ready">style sheet ready</a> flag is not yet set, and, the last
  time the <a href="webappapis.html#event-loop">event loop</a> reached step 1, the element was
  <a href="infrastructure.html#in-a-document" title="in a document">in that <code>Document</code></a>,
  and the user agent hasn't given up on that particular style sheet
  yet. A user agent may give up on a style sheet at any time.</p>

  <p class="note">Giving up on a style sheet before the style sheet
  loads, if the style sheet eventually does still load, means that the
  script might end up operating with incorrect information. For
  example, if a style sheet sets the color of an element to green, but
  a script that inspects the resulting style is executed before the
  sheet is loaded, the script will find that the element is black (or
  whatever the default color is), and might thus make poor choices
  (e.g. deciding to use black as the color elsewhere on the page,
  instead of green). Implementors have to balance the likelihood of a
  script using incorrect information with the performance impact of
  doing nothing while waiting for a slow network request to
  finish.</p>

  <p>A <code><a href="dom.html#document">Document</a></code> <dfn id="has-a-style-sheet-that-is-blocking-scripts">has a style sheet that is blocking
  scripts</dfn> if there is either <a href="#a-style-sheet-that-is-blocking-scripts">a style sheet that is
  blocking scripts</a> in the context of that
  <code><a href="dom.html#document">Document</a></code>, or if that <code><a href="dom.html#document">Document</a></code> is in a
  <a href="browsers.html#browsing-context">browsing context</a> that has a <a href="browsers.html#parent-browsing-context">parent browsing
  context</a>, and the <a href="browsers.html#active-document">active document</a> of that
  <a href="browsers.html#parent-browsing-context">parent browsing context</a> itself <a href="#has-a-style-sheet-that-is-blocking-scripts">has a style sheet
  that is blocking scripts</a>.</p>

  <p>A <code><a href="dom.html#document">Document</a></code> <dfn id="has-no-style-sheet-that-is-blocking-scripts">has no style sheet that is blocking
  scripts</dfn> if it does not <a href="#has-a-style-sheet-that-is-blocking-scripts" title="has a style sheet that is
  blocking scripts">have a style sheet that is blocking scripts</a>
  as defined in the previous paragraph.</p>

  </div>



  </body></html>
--- NEW FILE: the-noscript-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.3.2 The noscript element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-script-element.html" title="4.3.1 The script element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="sections.html" title="4.4 Sections" 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-script-element.html">&#8592; 4.3.1 The script element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="sections.html">4.4 Sections &#8594;</a>
  </div>

  <h4 id="the-noscript-element"><span class="secno">4.3.2 </span>The <dfn><code>noscript</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>
   <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>
   <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 of an <a href="infrastructure.html#html-documents" title="HTML documents">HTML document</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
   <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected in <a href="infrastructure.html#html-documents">HTML documents</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>When <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, in a <code><a href="the-head-element.html#the-head-element">head</a></code> element: in any order, zero or more <code><a href="the-link-element.html#the-link-element">link</a></code> elements, zero or more <code><a href="the-style-element.html#the-style-element">style</a></code> elements, and zero or more <code><a href="the-meta-element.html#the-meta-element">meta</a></code> elements.</dd>
   <dd>When <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, not in a <code><a href="the-head-element.html#the-head-element">head</a></code> element: <a href="content-models.html#transparent">transparent</a>, but there must be no <code><a href="#the-noscript-element">noscript</a></code> element descendants.</dd>
   <dd>Otherwise: text that conforms to the requirements given in the prose.</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-noscript-element">noscript</a></code> element <a href="rendering.html#represents">represents</a> nothing
  if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a>, and
  <a href="rendering.html#represents">represents</a> its children if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>. It is used
  to present different markup to user agents that support scripting
  and those that don't support scripting, by affecting how the
  document is parsed.</p>

  <p>When used in <a href="infrastructure.html#html-documents">HTML documents</a>, the allowed content
  model is as follows:</p>

  <dl><dt>In a <code><a href="the-head-element.html#the-head-element">head</a></code> element, if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
   <code><a href="#the-noscript-element">noscript</a></code> element</dt>

   <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only
   <code><a href="the-link-element.html#the-link-element">link</a></code>, <code><a href="the-style-element.html#the-style-element">style</a></code>, and <code><a href="the-meta-element.html#the-meta-element">meta</a></code>
   elements.</p></dd>

   <dt>In a <code><a href="the-head-element.html#the-head-element">head</a></code> element, if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
   <code><a href="#the-noscript-element">noscript</a></code> element</dt>

   <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
   except that invoking the <a href="the-end.html#html-fragment-parsing-algorithm">HTML fragment parsing
   algorithm</a> <!-- (which disables <script> execution) --> with
   the <code><a href="#the-noscript-element">noscript</a></code> element as the <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element and the
   text contents as the <var title="">input</var> must result in a
   list of nodes that consists only of <code><a href="the-link-element.html#the-link-element">link</a></code>,
   <code><a href="the-style-element.html#the-style-element">style</a></code>, and <code><a href="the-meta-element.html#the-meta-element">meta</a></code> elements that would be
   conforming if they were children of the <code><a href="#the-noscript-element">noscript</a></code>
   element, and no <a href="parsing.html#parse-error" title="parse error">parse
   errors</a>.</p></dd>

   <dt>Outside of <code><a href="the-head-element.html#the-head-element">head</a></code> elements, if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
   <code><a href="#the-noscript-element">noscript</a></code> element</dt>

   <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element's content model is
   <a href="content-models.html#transparent">transparent</a>, with the additional restriction that a
   <code><a href="#the-noscript-element">noscript</a></code> element must not have a <code><a href="#the-noscript-element">noscript</a></code>
   element as an ancestor (that is, <code><a href="#the-noscript-element">noscript</a></code> can't be
   nested).</p></dd>

   <dt>Outside of <code><a href="the-head-element.html#the-head-element">head</a></code> elements, if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
   <code><a href="#the-noscript-element">noscript</a></code> element</dt>

   <dd>

    <p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
    except that the text must be such that running the following
    algorithm results in a conforming document with no
    <code><a href="#the-noscript-element">noscript</a></code> elements and no <code><a href="the-script-element.html#the-script-element">script</a></code>
    elements, and such that no step in the algorithm causes an
    <a href="parsing.html#html-parser">HTML parser</a> to flag a <a href="parsing.html#parse-error">parse error</a>:</p>

    <ol><li>Remove every <code><a href="the-script-element.html#the-script-element">script</a></code> element from the
     document.</li>

     <li>Make a list of every <code><a href="#the-noscript-element">noscript</a></code> element in the
     document. For every <code><a href="#the-noscript-element">noscript</a></code> element in that list,
     perform the following steps:

      <ol><li>Let the <var title="">parent element</var> be the parent
       element of the <code><a href="#the-noscript-element">noscript</a></code> element.</li>

       <li>Take all the children of the <var title="">parent element</var>
       that come before the <code><a href="#the-noscript-element">noscript</a></code> element, and call these
       elements <var title="">the before children</var>.</li>

       <li>Take all the children of the <var title="">parent element</var>
       that come <em>after</em> the <code><a href="#the-noscript-element">noscript</a></code> element, and
       call these elements <var title="">the after children</var>.</li>

       <li>Let <var title="">s</var> be the concatenation of all the
       <code><a href="infrastructure.html#text-0">Text</a></code> node children of the <code><a href="#the-noscript-element">noscript</a></code>
       element.</li>

       <li>Set the <code title="dom-innerHTML"><a href="infrastructure.html#dom-innerhtml">innerHTML</a></code>
       attribute of the <var title="">parent element</var> to the value
       of <var title="">s</var>. (This, as a side-effect, causes the
       <code><a href="#the-noscript-element">noscript</a></code> element to be removed from the
       document.)</li>

       <li>Insert <var title="">the before children</var> at the start of
       the <var title="">parent element</var>, preserving their original
       relative order.</li>

       <li>Insert <var title="">the after children</var> at the end of the
       <var title="">parent element</var>, preserving their original
       relative order.</li>

      </ol></li>

    </ol></dd>

  </dl><p class="note">All these contortions are required because, for
  historical reasons, the <code><a href="#the-noscript-element">noscript</a></code> element is handled
  differently by the <a href="parsing.html#html-parser">HTML parser</a> based on whether <a href="parsing.html#scripting-flag" title="scripting flag">scripting was enabled or not</a> when the
  parser was invoked.</p>

  <p>The <code><a href="#the-noscript-element">noscript</a></code> element must not be used in <a href="infrastructure.html#xml-documents">XML
  documents</a>.</p>

  <p class="note">The <code><a href="#the-noscript-element">noscript</a></code> element is only effective
  in <a href="syntax.html#syntax">the HTML syntax</a>, it has no effect in <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML
  syntax</a>. This is because the way it works is by essentially
  "turning off" the parser when scripts are enabled, so that the
  contents of the element are treated as pure text and not as real
  elements. XML does not define a mechanism by which to do this.</p>

  <div class="impl">

  <p>The <code><a href="#the-noscript-element">noscript</a></code> element has no other requirements. In
  particular, children of the <code><a href="#the-noscript-element">noscript</a></code> element are not
  exempt from <a href="constraints.html#form-submission-0">form submission</a>, scripting, and so forth,
  even when <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a>
  for the element.</p>

  </div>

  <div class="example">

   <p>In the following example, a <code><a href="#the-noscript-element">noscript</a></code> element is
   used to provide fallback for a script.</p>

   <pre>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 &lt;script&gt;
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 &lt;/script&gt;
 &lt;noscript&gt;
  &lt;input type=submit value="Calculate Square"&gt;
 &lt;/noscript&gt;
&lt;/form&gt;</pre>

   <p>When script is disabled, a button appears to do the calculation
   on the server side. When script is enabled, the value is computed
   on-the-fly instead.</p>

   <p>The <code><a href="#the-noscript-element">noscript</a></code> element is a blunt
   instrument. Sometimes, scripts might be enabled, but for some
   reason the page's script might fail. For this reason, it's
   generally better to avoid using <code><a href="#the-noscript-element">noscript</a></code>, and to
   instead design the script to change the page from being a
   scriptless page to a scripted page on the fly, as in the next
   example:</p>

   <pre>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
 &lt;script&gt;
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
<strong>  var submit = document.getElementById('submit');
  submit.parentNode.removeChild(submit);</strong>
 &lt;/script&gt;
&lt;/form&gt;</pre>

   <p>The above technique is also useful in XHTML, since
   <code><a href="#the-noscript-element">noscript</a></code> is not supported in <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML
   syntax</a>.</p>

  </div>



  </body></html>
--- NEW FILE: the-code-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.11 The code element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-time-element.html" title="4.6.10 The time element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-var-element.html" title="4.6.12 The var 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-time-element.html">&#8592; 4.6.10 The time element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-var-element.html">4.6.12 The var element &#8594;</a>
  </div>

  <h4 id="the-code-element"><span class="secno">4.6.11 </span>The <dfn><code>code</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-code-element">code</a></code> element <a href="rendering.html#represents">represents</a> a fragment
  of computer code. This could be an XML element name, a filename, a
  computer program, or any other string that a computer would
  recognize.</p>

  <p>Although there is no formal way to indicate the language of
  computer code being marked up, authors who wish to mark
  <code><a href="#the-code-element">code</a></code> elements with the language used, e.g. so that
  syntax highlighting scripts can use the right rules, may do so by
  adding a class prefixed with "<code title="">language-</code>" to
  the element.</p>

  <div class="example">

   <p>The following example shows how the element can be used in a
   paragraph to mark up element names and computer code, including
   punctuation.</p>

   <pre>&lt;p&gt;The &lt;code&gt;code&lt;/code&gt; element represents a fragment of computer
code.&lt;/p&gt;

&lt;p&gt;When you call the &lt;code&gt;activate()&lt;/code&gt; method on the
&lt;code&gt;robotSnowman&lt;/code&gt; object, the eyes glow.&lt;/p&gt;

&lt;p&gt;The example below uses the &lt;code&gt;begin&lt;/code&gt; keyword to indicate
the start of a statement block. It is paired with an &lt;code&gt;end&lt;/code&gt;
keyword, which is followed by the &lt;code&gt;.&lt;/code&gt; punctuation character
(full stop) to indicate the end of the program.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>The following example shows how a block of code could be marked
   up using the <code><a href="the-pre-element.html#the-pre-element">pre</a></code> and <code><a href="#the-code-element">code</a></code> elements.</p>

   <pre>&lt;pre&gt;&lt;code class="language-pascal"&gt;var i: Integer;
begin
   i := 1;
end.&lt;/code&gt;&lt;/pre&gt;</pre>

   <p>A class is used in that example to indicate the language
   used.</p>

  </div>

  <p class="note">See the <code><a href="the-pre-element.html#the-pre-element">pre</a></code> element for more details.</p>


  </body></html>
--- NEW FILE: the-command-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.11.3 The command element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-summary-element.html" title="4.11.2 The summary element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-menu-element.html" title="4.11.4 The menu 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-summary-element.html">&#8592; 4.11.2 The summary element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-menu-element.html">4.11.4 The menu element &#8594;</a>
  </div>

  <h4 id="the-command-element"><span class="secno">4.11.3 </span>The <dfn id="the-command"><code>command</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>
   <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>
   <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#metadata-content-0">metadata content</a> is expected.</dd>
   <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>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-command-type"><a href="#attr-command-type">type</a></code></dd>
   <dd><code title="attr-command-label"><a href="#attr-command-label">label</a></code></dd>
   <dd><code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code></dd>
   <dd><code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code></dd>
   <dd><code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code></dd>
   <dd><code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code></dd>
   <!--<dd><code title="attr-command-default">default</code></dd>-->
   <dd><code title="attr-command-command"><a href="#attr-command-command">command</a></code></dd>
   <dd>Also, the <code title="attr-command-title"><a href="#attr-command-title">title</a></code> 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>
<pre class="idl">interface <dfn id="htmlcommandelement">HTMLCommandElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-command-type" title="dom-command-type">type</a>;
           attribute DOMString <a href="#dom-command-label" title="dom-command-label">label</a>;
           attribute DOMString <a href="#dom-command-icon" title="dom-command-icon">icon</a>;
           attribute boolean <a href="#dom-command-disabled" title="dom-command-disabled">disabled</a>;
           attribute boolean <a href="#dom-command-checked" title="dom-command-checked">checked</a>;
           attribute DOMString <a href="#dom-command-radiogroup" title="dom-command-radiogroup">radiogroup</a>;<!--
           attribute boolean <span title="dom-command-default">default</span>;-->
  readonly attribute <a href="elements.html#htmlelement">HTMLElement</a>? <a href="#dom-command-command" title="dom-command-command">command</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-command-element">command</a></code> element represents a command that the user
  can invoke.</p>

  <p>A command can be explicitly part of a context menu or toolbar,
  using the <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element. It can also be put anywhere
  else on a page, either just to define a keyboard shortcut, or to
  define a command that is then referenced from other
  <code><a href="#the-command-element">command</a></code> elements.</p>

  <p>A <code><a href="#the-command-element">command</a></code> element that uses the
  <code title="attr-command-type"><a href="#attr-command-type">type</a></code>,
  <code title="attr-command-label"><a href="#attr-command-label">label</a></code>,
  <code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code>,
  <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code>,
  <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>,
  <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code>,
  <!--<code title="attr-command-default">default</code>,--> and
  <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attributes defines a new
  command. A <code><a href="#the-command-element">command</a></code> element that uses the <code title="attr-command-command"><a href="#attr-command-command">command</a></code> <em>attribute</em>
  defines a command by reference to another one. This allows authors
  to define a command once, and set its state (e.g. whether it is
  active or disabled) in one place, and have all references to that
  command in the user interface change at the same time.</p>

  <hr><p>The <dfn id="attr-command-type" title="attr-command-type"><code>type</code></dfn>
  attribute indicates the kind of command: either a normal command
  with an associated action, or a state or option that can be toggled,
  or a selection of one item from a list of items.</p>

  <p>The attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with three
  keywords and states. The "<dfn id="attr-command-type-keyword-command" title="attr-command-type-keyword-command"><code>command</code></dfn>"
  keyword maps to the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state, the
  "<dfn id="attr-command-type-keyword-checkbox" title="attr-command-type-keyword-checkbox"><code>checkbox</code></dfn>"
  keyword maps to the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state, and
  the "<dfn id="attr-command-type-keyword-radio" title="attr-command-type-keyword-radio"><code>radio</code></dfn>"
  keyword maps to the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state. The
  <i>missing value default</i> is the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state.</p>

  <dl><dt>The <dfn id="attr-command-type-state-command" title="attr-command-type-state-command">Command</dfn> state</dt>

   <dd><p>The element <a href="rendering.html#represents">represents</a> a normal command with an associated action.</p></dd>

   <dt>The <dfn id="attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</dfn> state</dt>

   <dd><p>The element <a href="rendering.html#represents">represents</a> a state or option that can be toggled.</p></dd>

   <dt>The <dfn id="attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</dfn> state</dt>

   <dd><p>The element <a href="rendering.html#represents">represents</a> a selection of one item from a list of items.</p></dd>

  </dl><p>The <dfn id="attr-command-label" title="attr-command-label"><code>label</code></dfn>
  attribute gives the name of the command, as shown to the user. The
  <code title="attr-command-label"><a href="#attr-command-label">label</a></code> attribute must be
  specified and must have a value that is not the empty string.</p>

  <p>The <dfn id="attr-command-title" title="attr-command-title"><code>title</code></dfn>
  attribute gives a hint describing the command, which might be shown
  to the user to help him.</p>

  <p>The <dfn id="attr-command-icon" title="attr-command-icon"><code>icon</code></dfn>
  attribute gives a picture that represents the command. If the
  attribute is specified, the attribute's value must contain a
  <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
  spaces</a>. <span class="impl">To obtain the <a href="urls.html#absolute-url">absolute
  URL</a> of the icon when the attribute's value is not the empty
  string, the attribute's value must be <a href="urls.html#resolve-a-url" title="resolve a
  url">resolved</a> relative to the element. When the attribute is
  absent, or its value is the empty string, or <a href="urls.html#resolve-a-url" title="resolve a
  url">resolving</a> its value fails, there is no icon.</span></p>
  <!-- this is affected by the base URL being changed, so users of
  this should cache the image once they've fetched it once, at least
  until the relative url changes again -->

  <p>The <dfn id="attr-command-disabled" title="attr-command-disabled"><code>disabled</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that, if present, indicates that
  the command is not available in the current state.</p>

  <p class="note">The distinction between <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code> and <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> is subtle. A command would be
  disabled if, in the same context, it could be enabled if only
  certain aspects of the situation were changed. A command would be
  marked as hidden if, in that situation, the command will never be
  enabled. For example, in the context menu for a water faucet, the
  command "open" might be disabled if the faucet is already open, but
  the command "eat" would be marked hidden since the faucet could
  never be eaten.</p>

  <p>The <dfn id="attr-command-checked" title="attr-command-checked"><code>checked</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that, if present,
  indicates that the command is selected. The attribute must be
  omitted unless the <code title="attr-command-type"><a href="#attr-command-type">type</a></code>
  attribute is in either the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state or
  the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a>
  state.</p>

  <p>The <dfn id="attr-command-radiogroup" title="attr-command-radiogroup"><code>radiogroup</code></dfn>
  attribute gives the name of the group of commands that will be
  toggled when the command itself is toggled, for commands whose <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of
  the parent element. The attribute must be omitted unless the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is in the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state.</p>

<!--
  <p>If the <code>command</code> element is used when <span
  title="menu generation">generating</span> a <span>context
  menu</span>, then the <dfn
  title="attr-command-default"><code>default</code></dfn> attribute
  indicates, if present, that the command is the one that would have
  been invoked if the user had directly activated the menu's subject
  instead of using its context menu. The <code
  title="attr-command-default">default</code> attribute is a
  <span>boolean attribute</span>. The attribute must be omitted unless
  the <code title="attr-command-type">type</code> attribute is in the
  <span title="attr-command-type-state-command">Command</span>
  state.</p>

  <div class="example">

   ...an example that shows an element that, if double-clicked,
   invokes an action, but that also has a context menu, showing the
   various <code>command</code> attributes off, and that has a default
   command...

  </div>
-->

  <hr><p>If a <code><a href="#the-command-element">command</a></code> element <var title="">slave</var> has a
  <dfn id="attr-command-command" title="attr-command-command"><code>command</code></dfn>
  attribute, and <var title="">slave</var> is <a href="infrastructure.html#in-a-document">in a
  <code>Document</code></a>, and there is an element in that
  <code><a href="dom.html#document">Document</a></code> whose <a href="infrastructure.html#concept-id" title="concept-id">ID</a> has a
  value equal to the value of <var title="">slave</var>'s <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute, and the first
  such element in <a href="infrastructure.html#tree-order">tree order</a>, hereafter <var title="">master</var>, itself <a href="commands.html#concept-command" title="concept-command">defines
  a command</a> and either is not a <code><a href="#the-command-element">command</a></code> element or
  does not itself have a <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute, then the
  <dfn id="master-command">master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>

  <p>An element with a
  <code title="attr-command-command"><a href="#attr-command-command">command</a></code>
  attribute must have a <a href="#master-command">master command</a> and must not have any
  <code title="attr-command-type"><a href="#attr-command-type">type</a></code>,
  <code title="attr-command-label"><a href="#attr-command-label">label</a></code>,
  <code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code>,
  <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code>,
  <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>, or
  <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code>
  attributes.</p>

  <hr><div class="impl">

  <p>The <dfn id="dom-command-type" title="dom-command-type"><code>type</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The <dfn id="dom-command-label" title="dom-command-label"><code>label</code></dfn>, <dfn id="dom-command-icon" title="dom-command-icon"><code>icon</code></dfn>, <dfn id="dom-command-disabled" title="dom-command-disabled"><code>disabled</code></dfn>, <dfn id="dom-command-checked" title="dom-command-checked"><code>checked</code></dfn>, and <dfn id="dom-command-radiogroup" title="dom-command-radiogroup"><code>radiogroup</code></dfn><!--,
  and <dfn title="dom-command-default"><code>default</code></dfn>-->
  IDL attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content
  attributes of the same name.</p>

  <p>The <dfn id="dom-command-command" title="dom-command-command"><code>command</code></dfn>
  IDL attribute must return the <a href="#master-command">master command</a>, if any,
  or null otherwise.</p>

  <hr><p>If the element's <a href="commands.html#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is false
  (enabled) then the element's <a href="content-models.html#activation-behavior">activation behavior</a>
  depends on the element's <code title="attr-command-type"><a href="#attr-command-type">type</a></code>
  and <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attributes, as
  follows:</p>

  <dl class="switch"><dt>If the element has a <a href="#master-command">master command</a> set by its
   <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute</dt>

   <dd><p>The user agent must <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation
   steps</a> on the element's <a href="#master-command">master command</a>.</p></dd>
   <!-- we know it has a defined <span>activation behavior</span> if
   we get here -->


   <dt>If the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is
   in the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state</dt>

   <dd><p>If the element has a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, the UA must
   remove that attribute. Otherwise, the UA must add a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, with the
   literal value <code title="">checked</code>.</p></dd>


   <dt>If the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is
   in the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state</dt>

   <dd><p>If the element has a parent, then the UA must walk the list
   of child nodes of that parent element, and for each node that is a
   <code><a href="#the-command-element">command</a></code> element, if that element has a <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code> attribute whose
   value exactly matches the current element's (treating missing <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code> attributes as if
   they were the empty string), and has a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, must remove
   that attribute.</p>

   <p>Then, the element's <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute attribute
   must be set to the literal value <code title="">checked</code>.</p></dd>


   <dt>Otherwise</dt>

   <dd><p>The element's <a href="content-models.html#activation-behavior">activation behavior</a> is to do
   nothing.</p></dd>

  </dl><p class="note">Firing a synthetic <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event at the element does not cause
  any of the actions described above to happen.</p>

  <!-- v2COMMAND: Expose the Triggers facet again. -->

  <p>If the element's <a href="commands.html#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is true
  (disabled) then the element has no <a href="content-models.html#activation-behavior">activation
  behavior</a>.</p>

  </div>

  <p class="note"><code><a href="#the-command-element">command</a></code> elements are not rendered
  unless they <a href="the-menu-element.html#the-menu-element" title="menu">form part of a menu</a>.</p>

  <div class="example">

   <p>Here is an example of a toolbar with three buttons that let the
   user toggle between left, center, and right alignment. One could
   imagine such a toolbar as part of a text editor. The toolbar also
   has a separator followed by another button labeled "Publish",
   though that button is disabled.</p>

   <pre>&lt;menu type="toolbar"&gt;
 &lt;command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')"&gt;
 &lt;command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')"&gt;
 &lt;command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')"&gt;
 &lt;hr&gt;
 &lt;command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()"&gt;
&lt;/menu&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: urls.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>2.6 URLs &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1669 lines suppressed...]

       <dd>

        <p>The <a href="webappapis.html#concept-task" title="concept-task">tasks</a> from the
        <a href="#fetch">fetch</a> algorithm are <a href="webappapis.html#queue-a-task" title="queue a
        task">queued</a> normally, and for the purposes of the
        calling algorithm, the obtained resource is
        <a href="#cors-same-origin">CORS-same-origin</a>.</p>

       </dd>

      </dl></li>

    </ol></dd>

  </dl></div>



  </body></html>
--- NEW FILE: the-textarea-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.13 The textarea element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-option-element.html" title="4.10.12 The option element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-keygen-element.html" title="4.10.14 The keygen 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-option-element.html">&#8592; 4.10.12 The option element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-keygen-element.html">4.10.14 The keygen element &#8594;</a>
  </div>

  <h4 id="the-textarea-element"><span class="secno">4.10.13 </span>The <dfn><code>textarea</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#interactive-content-0">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</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#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#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-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code></dd>
   <dd><code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-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-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code></dd>
   <dd><code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code></dd>
   <dd><code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code></dd>
   <dd><code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code></dd>
   <dd><code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code></dd>
   <dd><code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</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="htmltextareaelement">HTMLTextAreaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute unsigned long <a href="#dom-textarea-cols" title="dom-textarea-cols">cols</a>;
           attribute DOMString <a href="#dom-textarea-dirname" title="dom-textarea-dirName">dirName</a>;
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-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 long <a href="#dom-textarea-maxlength" title="dom-textarea-maxLength">maxLength</a>;
           attribute DOMString <a href="attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute DOMString <a href="#dom-textarea-placeholder" title="dom-textarea-placeholder">placeholder</a>;
           attribute boolean <a href="#dom-textarea-readonly" title="dom-textarea-readOnly">readOnly</a>;
           attribute boolean <a href="#dom-textarea-required" title="dom-textarea-required">required</a>;
           attribute unsigned long <a href="#dom-textarea-rows" title="dom-textarea-rows">rows</a>;
           attribute DOMString <a href="#dom-textarea-wrap" title="dom-textarea-wrap">wrap</a>;

  readonly attribute DOMString <a href="#dom-textarea-type" title="dom-textarea-type">type</a>;
           attribute DOMString <a href="#dom-textarea-defaultvalue" title="dom-textarea-defaultValue">defaultValue</a>;
           attribute DOMString <a href="#dom-textarea-value" title="dom-textarea-value">value</a>;
  readonly attribute unsigned long <a href="#dom-textarea-textlength" title="dom-textarea-textLength">textLength</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);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;

  void <a href="textFieldSelection.html#dom-textarea/input-select" title="dom-textarea/input-select">select</a>();
           attribute unsigned long <a href="textFieldSelection.html#dom-textarea/input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
           attribute unsigned long <a href="textFieldSelection.html#dom-textarea/input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
           attribute DOMString <a href="textFieldSelection.html#dom-textarea/input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;

  void <a href="textFieldSelection.html#dom-textarea/input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction);
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-textarea-element">textarea</a></code> element <a href="rendering.html#represents">represents</a> a
  multiline plain text edit control<span class="impl"> for the
  element's <dfn id="concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</dfn></span>. The contents of the control represent the
  control's default value.</p>

  <div class="impl">

  <p>The <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> of
  a <code><a href="#the-textarea-element">textarea</a></code> control must be initially the empty
  string.</p>

  <p>A newline in a <code><a href="#the-textarea-element">textarea</a></code> element, and in its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>, should separate
  paragraphs for the purposes of the Unicode bidirectional algorithm.
  This requirement 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#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p>

  </div>

  <p>The <dfn id="attr-textarea-readonly" title="attr-textarea-readonly"><code>readonly</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> used to control whether the text
  can be edited by the user or not.</p>

  <div class="impl">

  <p><strong>Constraint validation</strong>: If the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute is
  specified on a <code><a href="#the-textarea-element">textarea</a></code> element, the element is
  <a href="constraints.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  <p>A <code><a href="#the-textarea-element">textarea</a></code> element is <dfn id="concept-textarea-mutable" title="concept-textarea-mutable">mutable</dfn> if it is neither
  <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> nor has a <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute
  specified.</p>

  <p>When a <code><a href="#the-textarea-element">textarea</a></code> is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> should be
  editable by the user: the user agent should allow the user to edit,
  insert, and remove text, and to insert and remove line breaks in the
  form of "LF" (U+000A) characters. Any time the user causes
  the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> to change, the user agent must <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-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code>
  element. User agents may wait for a suitable break in the user's
  interaction before queuing the task; for example, a user agent could
  wait for the user to have not hit a key for 100ms, so as to only
  fire the event when the user pauses, instead of continuously for
  each keystroke.</p> <!-- same text is present in the <input> section
  -->

  <p>A <code><a href="#the-textarea-element">textarea</a></code> element has a <dfn id="concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</dfn>, which must be
  initially set to false, and must be set to true whenever the user
  interacts with the control in a way that changes the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>.</p>

  <p>When the <code><a href="#the-textarea-element">textarea</a></code> element's <code><a href="infrastructure.html#textcontent">textContent</a></code>
  IDL attribute changes value, if the element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a> is false,
  then the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> must be set to the value of the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>

  <p>The <a href="constraints.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-textarea-element">textarea</a></code> elements is to set the
  element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">value</a> to
  the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <!-- this next bit is also in the <input> Text/Search section -->
  <!-- and something similar is in the session history section -->
  <p>If the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, the user agent
  should allow the user to change the writing direction of the
  element, setting it either to a left-to-right writing direction or a
  right-to-left writing direction. If the user does so, the user agent
  must then run the following steps:</p>

  <ol><li><p>Set the element's <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code>
   attribute to "<code title="attr-dir-ltr"><a href="global-attributes.html#attr-dir-ltr">ltr</a></code>" if the user
   selected a left-to-right writing direction, and "<code title="attr-dir-rtl"><a href="global-attributes.html#attr-dir-rtl">rtl</a></code>" if the user selected a
   right-to-left writing direction.</p></li>

   <li><p><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-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code>
   element.</p></li>

  </ol></div>

  <p>The <dfn id="attr-textarea-cols" title="attr-textarea-cols"><code>cols</code></dfn>
  attribute specifies the expected maximum number of characters per
  line. If the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute
  is specified, its value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero. <span class="impl">If applying the
  <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the
  attribute's value results in a number greater than zero, then the
  element's <dfn id="attr-textarea-cols-value" title="attr-textarea-cols-value">character
  width</dfn> is that value; otherwise, it is 20.</span></p>

  <div class="impl">

  <p>The user agent may use the <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character width</a> as a hint to
  the user as to how many characters the server prefers per line
  (e.g. for visual user agents by making the width of the control be
  that many characters). In visual renderings, the user agent should
  wrap the user's input in the rendering so that each line is no wider
  than this number of characters.</p>

  </div>

  <p>The <dfn id="attr-textarea-rows" title="attr-textarea-rows"><code>rows</code></dfn>
  attribute specifies the number of lines to show. If the <code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code> attribute is specified, its
  value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a> greater than
  zero. <span class="impl">If applying the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing
  non-negative integers</a> to the attribute's value results in a
  number greater than zero, then the element's <dfn id="attr-textarea-rows-value" title="attr-textarea-rows-value">character height</dfn> is that
  value; otherwise, it is 2.</span></p>

  <div class="impl">

  <p>Visual user agents should set the height of the control to the
  number of lines given by <a href="#attr-textarea-rows-value" title="attr-textarea-rows-value">character height</a>.</p>

  </div>

  <p>The <dfn id="attr-textarea-wrap" title="attr-textarea-wrap"><code>wrap</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with two keywords
  and states: the <dfn id="attr-textarea-wrap-soft" title="attr-textarea-wrap-soft"><code>soft</code></dfn> keyword
  which maps to the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state, and the
  <dfn id="attr-textarea-wrap-hard" title="attr-textarea-wrap-hard"><code>hard</code></dfn> keyword
  which maps to the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state. The
  <i>missing value default</i> is the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state.</p>

  <p>The <dfn id="attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</dfn> state
  indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is not to be
  wrapped when it is submitted (though it can still be wrapped in the
  rendering).</p>

  <p>The <dfn id="attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</dfn> state
  indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is to have
  newlines added by the user agent so that the text is wrapped when it
  is submitted.</p>

  <p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code>
  attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute must be
  specified.</p>

  <!-- attr-textarea-wrap-off (attr-textarea-wrap-off-state): not
  conforming; turns off the rendering of wrapping but otherwise acts
  like 'soft' -->

  <div class="impl">

  <p>For historical reasons, the element's value is normalised in
  three different ways for three different purposes. The <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> is the value as
  it was originally set. It is not normalized. The <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API value</a> is the value
  used in the <code title="dom-textarea-value"><a href="#dom-textarea-value">value</a></code> IDL
  attribute. It is normalized so that line breaks use "LF" (U+000A) characters. Finally, there is the form submission <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>. It is normalized so that line
  breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character
  pairs, and in addition, if necessary given the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute, additional line
  breaks are inserted to wrap the text at the given width.</p>

  <p>The element's <dfn id="concept-textarea-api-value" title="concept-textarea-api-value">API
  value</dfn> is defined to be the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with the
  following transformation applied:</p>

  <ol><li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
   character pair from the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with a single
   U+000A LINE FEED (CRLF) character.</p></li>

   <li><p>Replace every remaining U+000D CARRIAGE RETURN character from
   the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with
   a single U+000A LINE FEED (CRLF) character.</p></li>

  </ol><p>The element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is
  defined to be the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with the
  following transformation applied:</p>

  <ol><li><p>Replace every occurrence of a "CR" (U+000D)
   character not followed by a "LF" (U+000A) character, and
   every occurrence of a "LF" (U+000A) character not preceded
   by a "CR" (U+000D) character, by a two-character
   string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED
   (CRLF) character pair.</p></li>

   <li><p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, insert
   U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs
   into the string using a UA-defined algorithm so that each line has
   no more than <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character
   width</a> characters. For the purposes of this requirement,
   lines are delimited by the start of the string, the end of the
   string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
   character pairs.</p></li>

  </ol></div>

  <p>The <dfn id="attr-textarea-maxlength" title="attr-textarea-maxlength"><code>maxlength</code></dfn>
  attribute is a <a href="attributes-common-to-form-controls.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a> controlled by the
  <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a>.</p>

  <p>If the <code><a href="#the-textarea-element">textarea</a></code> element has a <a href="attributes-common-to-form-controls.html#maximum-allowed-value-length">maximum allowed
  value length</a>, then the element's children must be such that
  the <a href="infrastructure.html#code-unit-length">code-unit length</a> of the value of the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute is equal to or less than the
  element's <a href="attributes-common-to-form-controls.html#maximum-allowed-value-length">maximum allowed value length</a>.</p>

  <p>The <dfn id="attr-textarea-required" title="attr-textarea-required"><code>required</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the user will
  be required to enter a value before submitting the form.</p>

  <div class="impl">

  <p><strong>Constraint validation</strong>: If the element has its
  <code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code> attribute
  specified, and the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, and the element's
  <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is the empty string,
  then the element is <a href="constraints.html#suffering-from-being-missing">suffering from being missing</a>.</p>

  </div>


  <!-- similar text in the <input> section -->

  <p>The <dfn id="attr-textarea-placeholder" title="attr-textarea-placeholder"><code>placeholder</code></dfn>
  attribute represents a hint (a word or short phrase) intended to aid
  the user with data entry. A hint could be a sample value or a brief
  description of the expected format. The attribute, if specified,
  must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.</p>

  <p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute is more appropriate.</p>

  <p>The <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code>
  attribute should not be used as an alternative to a
  <code><a href="the-label-element.html#the-label-element">label</a></code>.</p>

  <div class="impl">

  <p>User agents should present this hint to the user, after having
  <a href="common-microsyntaxes.html#strip-line-breaks" title="strip line breaks">stripped line breaks</a> from it,
  when the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is
  the empty string and the control is not focused (e.g. by displaying
  it inside a blank unfocused control).</p>

  </div>

  <p>The <dfn id="attr-textarea-dirname" title="attr-textarea-dirname"><code>dirname</code></dfn>
  attribute is a <a href="form-submission.html#form-control-dirname-attribute">form control <code title="">dirname</code>
  attribute</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-textarea-element">textarea</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. The <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">textarea</var> . <code title="attr-textarea-type">type</code></dt>

   <dd>

    <p>Returns the string "<code title="">textarea</code>".</p>

   </dd>

   <dt><var title="">textarea</var> . <code title="attr-textarea-value">value</code></dt>

   <dd>

    <p>Returns the current value of the element.</p>

    <p>Can be set, to change the value.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-textarea-cols" title="dom-textarea-cols"><code>cols</code></dfn>, <dfn id="dom-textarea-placeholder" title="dom-textarea-placeholder"><code>placeholder</code></dfn>,
  <dfn id="dom-textarea-required" title="dom-textarea-required"><code>required</code></dfn>, <dfn id="dom-textarea-rows" title="dom-textarea-rows"><code>rows</code></dfn>, and <dfn id="dom-textarea-wrap" title="dom-textarea-wrap"><code>wrap</code></dfn> attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> and <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attributes are <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited
  to only non-negative numbers greater than zero</a>. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> attribute's default value is
  20. The <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attribute's
  default value is 2. The <dfn id="dom-textarea-dirname" title="dom-textarea-dirName"><code>dirName</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> content attribute. The
  <dfn id="dom-textarea-maxlength" title="dom-textarea-maxLength"><code>maxLength</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>. The <dfn id="dom-textarea-readonly" title="dom-textarea-readOnly"><code>readOnly</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> content
  attribute.</p>

  <p>The <dfn id="dom-textarea-type" title="dom-textarea-type"><code>type</code></dfn> IDL
  attribute must return the value "<code title="">textarea</code>".</p>

  <p>The <dfn id="dom-textarea-defaultvalue" title="dom-textarea-defaultValue"><code>defaultValue</code></dfn>
  IDL attribute must act like the element's <code><a href="infrastructure.html#textcontent">textContent</a></code>
  IDL attribute.</p>

  <p>The <dfn id="dom-textarea-value" title="dom-textarea-value"><code>value</code></dfn>
  attribute must, on getting, return the element's <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API value</a>; on setting, it
  must set the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> to the new value, set the element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a> to true, and
  should then move the text entry cursor position to the end of the
  text field, unselecting any selected text and resetting the
  selection direction to <i>none</i>.</p>

  <p>The <dfn id="dom-textarea-textlength" title="dom-textarea-textLength"><code>textLength</code></dfn> IDL
  attribute must return the <a href="infrastructure.html#code-unit-length">code-unit length</a> of the
  element's <a href="#concept-textarea-api-value" title="concept-textarea-api-value">API
  value</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-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>,

  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>
<!--TOPIC:HTML-->

  <div class="example">

   <p>Here is an example of a <code><a href="#the-textarea-element">textarea</a></code> being used for
   unrestricted free-form text input in a form:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To specify a maximum length for the comments, one can use
   the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code>
   attribute:</p>

   <pre>&lt;p&gt;If you have any short comments, please let us know: &lt;textarea cols=80 name=comments maxlength=200&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To give a default value, text can be included inside the element:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;You rock!&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To have the browser submit <a href="global-attributes.html#the-directionality">the directionality</a> of
   the element along with the value, the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> attribute can be
   specified:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know (you may use either English or Hebrew for your comments):
&lt;textarea cols=80 name=comments dirname=comments.dir&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: the-div-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.13 The div element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-figcaption-element.html" title="4.5.12 The figcaption element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="text-level-semantics.html" title="4.6 Text-level semantics" 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-figcaption-element.html">&#8592; 4.5.12 The figcaption element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="text-level-semantics.html">4.6 Text-level semantics &#8594;</a>
  </div>

  <h4 id="the-div-element"><span class="secno">4.5.13 </span>The <dfn><code>div</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#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>
    <pre class="idl">interface <dfn id="htmldivelement">HTMLDivElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-div-element">div</a></code> element has no special meaning at all. It
  <a href="rendering.html#represents">represents</a> its children. It can be used with the <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>, and <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attributes to mark up semantics
  common to a group of consecutive elements.</p>

  <p class="note">Authors are strongly encouraged to view the
  <code><a href="#the-div-element">div</a></code> element as an element of last resort, for when no
  other element is suitable. Use of more appropriate elements instead
  of the <code><a href="#the-div-element">div</a></code> element leads to better accessibility for
  readers and easier maintainability for authors.</p>

  <div class="example">

   <p>For example, a blog post would be marked up using
   <code><a href="the-article-element.html#the-article-element">article</a></code>, a chapter using <code><a href="the-section-element.html#the-section-element">section</a></code>, a
   page's navigation aids using <code><a href="the-nav-element.html#the-nav-element">nav</a></code>, and a group of form
   controls using <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code>.</p>

   <p>On the other hand, <code><a href="#the-div-element">div</a></code> elements can be useful for
   stylistic purposes or to wrap multiple paragraphs within a section
   that are all to be annotated in a similar way. In the following
   example, we see <code><a href="#the-div-element">div</a></code> elements used as a way to set the
   language of two paragraphs at once, instead of setting the language
   on the two paragraph elements separately:</p>

   <pre>&lt;article lang="en-US"&gt;
 &lt;h1&gt;My use of language and my cats&lt;/h1&gt;
 &lt;p&gt;My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.&lt;/p&gt;
 &lt;div lang="en-GB"&gt;
  &lt;p&gt;My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.&lt;/p&gt;
  &lt;p&gt;Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...&lt;/p&gt;
 &lt;/div&gt;
 &lt;p&gt;I should say "sidewalk" and "apartment" and "color"!&lt;/p&gt;
&lt;/article&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-output-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.15 The output element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-keygen-element.html" title="4.10.14 The keygen element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-progress-element.html" title="4.10.16 The progress 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-keygen-element.html">&#8592; 4.10.14 The keygen element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-progress-element.html">4.10.16 The progress element &#8594;</a>
  </div>

  <h4 id="the-output-element"><span class="secno">4.10.15 </span>The <dfn><code>output</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="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</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#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><code title="attr-output-for"><a href="#attr-output-for">for</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="htmloutputelement">HTMLOutputElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="infrastructure.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-output-htmlfor" title="dom-output-htmlFor">htmlFor</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-output-type" title="dom-output-type">type</a>;
           attribute DOMString <a href="#dom-output-defaultvalue" title="dom-output-defaultValue">defaultValue</a>;
           attribute DOMString <a href="#dom-output-value" title="dom-output-value">value</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);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-output-element">output</a></code> element <a href="rendering.html#represents">represents</a> the result of a
  calculation.</p>

  <p>The <dfn id="attr-output-for" title="attr-output-for"><code>for</code></dfn> content
  attribute allows an explicit relationship to be made between the
  result of a calculation and the elements that represent the values
  that went into the calculation or that otherwise influenced the
  calculation. The <code title="attr-output-for"><a href="#attr-output-for">for</a></code> attribute,
  if specified, must contain a string consisting of an <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered
  set of unique space-separated tokens</a> that are
  <a href="infrastructure.html#case-sensitive">case-sensitive</a>, each of which must have the value of an
  <a href="infrastructure.html#concept-id" title="concept-id">ID</a> of an element in the same
  <code><a href="dom.html#document">Document</a></code>.</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-output-element">output</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>

  <div class="impl">

  <p>The element has a <dfn id="concept-output-mode" title="concept-output-mode">value mode
  flag</dfn> which is either <i title="concept-output-mode-value">value</i> or <i title="concept-output-mode-default">default</i>. Initially, the
  <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> must be set
  to <i title="concept-output-mode-default">default</i>.</p>

  <p>The element also has a <dfn id="concept-output-defaultvalue" title="concept-output-defaultValue">default value</dfn>. Initially,
  the <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>
  must be the empty string.</p>

  <p>When the <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a>
  is in mode <i title="concept-output-mode-default">default</i>, the
  contents of the element represent both the value of the element and
  its <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default
  value</a>. When the <a href="#concept-output-mode" title="concept-output-mode">value mode
  flag</a> is in mode <i title="concept-output-mode-value">value</i>, the contents of the
  element represent the value of the element only, and the <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> is only
  accessible using the <code title="dom-output-defaultValue"><a href="#dom-output-defaultvalue">defaultValue</a></code> IDL
  attribute.</p>

  <p>Whenever the element's descendants are changed in any way, if the
  <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> is in mode
  <i title="concept-output-mode-default">default</i>, the element's
  <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> must
  be set to the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <p>The <a href="constraints.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-output-element">output</a></code> elements is to set the
  element's <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a>
  to <i title="concept-output-mode-default">default</i> and then to
  set the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute to the
  value of the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> (thus
  replacing the element's child nodes).</p>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">output</var> . <code title="dom-output-value"><a href="#dom-output-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current value.</p>

    <p>Can be set, to change the value.</p>

   </dd>

   <dt><var title="">output</var> . <code title="dom-output-defaultValue"><a href="#dom-output-defaultvalue">defaultValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current default value.</p>

    <p>Can be set, to change the default value.</p>

   </dd>

   <dt><var title="">output</var> . <code title="dom-output-type"><a href="#dom-output-type">type</a></code></dt>

   <dd>

    <p>Returns the string "<code title="">output</code>".</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-output-value" title="dom-output-value"><code>value</code></dfn> IDL
  attribute must act like the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute, except that on setting, in addition, before the child
  nodes are changed, the element's <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> must be set to <i title="concept-output-mode-value">value</i>.</p>

  <p>The <dfn id="dom-output-defaultvalue" title="dom-output-defaultValue"><code>defaultValue</code></dfn> IDL
  attribute, on getting, must return the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>. On
  setting, the attribute must set the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>, and, if
  the element's <a href="#concept-output-mode" title="concept-output-mode">value mode
  flag</a> is in the mode <i title="concept-output-mode-default">default</i>, set the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute as well.</p>

  <p>The <dfn id="dom-output-type" title="dom-output-type"><code>type</code></dfn>
  attribute must return the string "<code title="">output</code>".</p>

  <p>The <dfn id="dom-output-htmlfor" title="dom-output-htmlFor"><code>htmlFor</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-output-for"><a href="#attr-output-for">for</a></code> content attribute.</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-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>A simple calculator could use <code><a href="#the-output-element">output</a></code> for its
   display of calculated results:</p>

   <pre>&lt;form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"&gt;
 &lt;input name=a type=number step=any&gt; +
 &lt;input name=b type=number step=any&gt; =
 &lt;output name=o&gt;&lt;/output&gt;
&lt;/form&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: the-label-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.6 The label element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-legend-element.html" title="4.10.5 The legend element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-input-element.html" title="4.10.7 The input 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-legend-element.html">&#8592; 4.10.5 The legend element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-input-element.html">4.10.7 The input element &#8594;</a>
  </div>

  <h4 id="the-label-element"><span class="secno">4.10.6 </span>The <dfn><code>label</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#interactive-content-0">Interactive content</a>.</dd>
   <dd><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#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>, but with no descendant <a href="forms.html#category-label" title="category-label">labelable elements</a> unless it is the element's <a href="#labeled-control">labeled control</a>, and no descendant <code><a href="#the-label-element">label</a></code> elements.</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-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-label-for"><a href="#attr-label-for">for</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="htmllabelelement">HTMLLabelElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</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="#dom-label-htmlfor" title="dom-label-htmlFor">htmlFor</a>;
  readonly attribute <a href="elements.html#htmlelement">HTMLElement</a>? <a href="#dom-label-control" title="dom-label-control">control</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-label-element">label</a></code> <a href="rendering.html#represents">represents</a> a caption in a
  user interface. The caption can be associated with a specific form
  control<span class="impl">, known as the <code><a href="#the-label-element">label</a></code>
  element's <dfn id="labeled-control">labeled control</dfn></span>, either using <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute, or by putting the form
  control inside the <code><a href="#the-label-element">label</a></code> element itself.</p>

  <div class="impl">

  <p>Except where otherwise specified by the following rules, a
  <code><a href="#the-label-element">label</a></code> element has no <a href="#labeled-control">labeled control</a>.</p>

  </div>

  <p>The <dfn id="attr-label-for" title="attr-label-for"><code>for</code></dfn> attribute
  may be specified to indicate a form control with which the caption
  is to be associated. If the attribute is specified, the attribute's
  value must be the <a href="infrastructure.html#concept-id" title="concept-id">ID</a> of a <a href="forms.html#category-label" title="category-label">labelable element</a> in the same
  <code><a href="dom.html#document">Document</a></code> as the <code><a href="#the-label-element">label</a></code> element. <span class="impl">If the attribute is specified and there is an element
  in the <code><a href="dom.html#document">Document</a></code> whose <a href="infrastructure.html#concept-id" title="concept-id">ID</a> is equal to the value of the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute, and the first such
  element is a <a href="forms.html#category-label" title="category-label">labelable element</a>,
  then that element is the <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled
  control</a>.</span></p>

  <div class="impl">

  <p>If the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute is not
  specified, but the <code><a href="#the-label-element">label</a></code> element has a <a href="forms.html#category-label" title="category-label">labelable element</a> descendant, then the
  first such descendant in <a href="infrastructure.html#tree-order">tree order</a> is the
  <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled control</a>.</p>

  <p>The <code><a href="#the-label-element">label</a></code> element's exact default presentation and
  behavior, in particular what its <a href="content-models.html#activation-behavior">activation behavior</a>
  might be, if anything, should match the platform's label behavior.
  The <a href="content-models.html#activation-behavior">activation behavior</a> of a <code><a href="#the-label-element">label</a></code> element
  for events targetted at <a href="content-models.html#interactive-content-0">interactive content</a> descendants
  of a <code><a href="#the-label-element">label</a></code> element, and any descendants of those
  <a href="content-models.html#interactive-content-0">interactive content</a> descendants, must be to do
  nothing.</p>

  <!-- activation behaviour need not be dependent on whether the
  labeled control is being rendered:
   http://software.hixie.ch/utilities/js/live-dom-viewer/saved/371
  -->

  <div class="example">

   <p>For example, on platforms where clicking a checkbox label checks
   the checkbox, clicking the <code><a href="#the-label-element">label</a></code> in the following
   snippet could trigger the user agent to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click
   activation steps</a> on the <code><a href="the-input-element.html#the-input-element">input</a></code> element, as if
   the element itself had been triggered by the user:</p>

   <pre>&lt;label&gt;&lt;input type=checkbox name=lost&gt; Lost&lt;/label&gt;</pre>

   <p>On other platforms, the behavior might be just to focus the
   control, or do nothing.</p>

  </div>

  </div>

  <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-label-element">label</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p>

  <div class="example">

   <p>The following example shows three form controls each with a
   label, two of which have small text showing the right format for
   users to use.</p>

   <pre>&lt;p&gt;&lt;label&gt;Full name: &lt;input name=fn&gt; &lt;small&gt;Format: First Last&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Age: &lt;input name=age type=number min=0&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Post code: &lt;input name=pc&gt; &lt;small&gt;Format: AB12 3CD&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">label</var> . <code title="dom-label-control"><a href="#dom-label-control">control</a></code></dt>

   <dd>

    <p>Returns the form control that is associated with this element.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-label-htmlfor" title="dom-label-htmlFor"><code>htmlFor</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> content attribute.</p>

  <p>The <dfn id="dom-label-control" title="dom-label-control"><code>control</code></dfn> IDL
  attribute must return the <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled
  control</a>, if any, or null if there isn't one.</p>

  <p>The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute is part
  of the element's forms API.</p>

  </div>

  <hr><dl class="domintro"><dt><var title="">control</var> . <code title="dom-lfe-labels"><a href="#dom-lfe-labels">labels</a></code></dt>

   <dd>

    <p>Returns a <code><a href="infrastructure.html#nodelist">NodeList</a></code> of all the <code><a href="#the-label-element">label</a></code>
    elements that the form control is associated with.</p>

   </dd>

  </dl><div class="impl">

  <p><a href="forms.html#category-label" title="category-label">Labelable elements</a> have a
  <code><a href="infrastructure.html#nodelist">NodeList</a></code> object associated with them that represents
  the list of <code><a href="#the-label-element">label</a></code> elements, in <a href="infrastructure.html#tree-order">tree order</a>,
  whose <a href="#labeled-control">labeled control</a> is the element in question. The
  <dfn id="dom-lfe-labels" title="dom-lfe-labels"><code>labels</code></dfn> IDL attribute
  of <a href="forms.html#category-label" title="category-label">labelable elements</a>, on
  getting, must return that <code><a href="infrastructure.html#nodelist">NodeList</a></code> object.</p>

  </div>
<!--TOPIC:HTML-->


  </body></html>
--- NEW FILE: dnd.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>7.7 Drag and drop &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...2725 lines suppressed...]
   content to a victim page's <code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code> region. If the
   browser does not ensure that only safe content is dragged,
   potentially unsafe content such as scripts and event handlers in
   the selection, once dropped (or pasted) into the victim site, get
   the privileges of the victim site. This would thus enable a
   cross-site scripting attack.</p>

  </div>

  </div>
<!--REMOVE-TOPIC:Security-->


<!--FIND-->

<!--POSTMSG-->
<!--POSTMSG-->
<!--TOPIC:HTML Syntax and Parsing-->

  </body></html>
--- NEW FILE: the-dl-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.8 The dl element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-li-element.html" title="4.5.7 The li element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-dt-element.html" title="4.5.9 The dt 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-li-element.html">&#8592; 4.5.7 The li element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-dt-element.html">4.5.9 The dt element &#8594;</a>
  </div>

  <h4 id="the-dl-element"><span class="secno">4.5.8 </span>The <dfn><code>dl</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>If the element's children include at least one name-value group: <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>Zero or more groups each consisting of one or more
   <code><a href="the-dt-element.html#the-dt-element">dt</a></code> elements followed by one or more <code><a href="the-dd-element.html#the-dd-element">dd</a></code>
   elements.</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="htmldlistelement">HTMLDListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-dl-element">dl</a></code> element <a href="rendering.html#represents">represents</a> an
  association list consisting of zero or more name-value groups (a
  description list). Each group must consist of one or more names
  (<code><a href="the-dt-element.html#the-dt-element">dt</a></code> elements) followed by one or more values
  (<code><a href="the-dd-element.html#the-dd-element">dd</a></code> elements). Within a single <code><a href="#the-dl-element">dl</a></code> element,
  there should not be more than one <code><a href="the-dt-element.html#the-dt-element">dt</a></code> element for each
  name.</p>

  <p>Name-value groups may be terms and definitions, metadata topics
  and values, questions and answers, or any other groups of name-value
  data.</p>

  <p>The values within a group are alternatives; multiple paragraphs
  forming part of the same value must all be given within the same
  <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element.</p>

  <p>The order of the list of groups, and of the names and values
  within each group, may be significant.</p>

  <div class="impl">

  <p>If a <code><a href="#the-dl-element">dl</a></code> element is empty, it contains no groups.</p>

  <p>If a <code><a href="#the-dl-element">dl</a></code> element has one or more non-<a href="content-models.html#inter-element-whitespace" title="inter-element whitespace">whitespace</a> <code><a href="infrastructure.html#text-0">Text</a></code>
  node children, or has child elements that are neither
  <code><a href="the-dt-element.html#the-dt-element">dt</a></code> nor <code><a href="the-dd-element.html#the-dd-element">dd</a></code> elements, all such
  <code><a href="infrastructure.html#text-0">Text</a></code> nodes and elements, as well as their descendants
  (including any <code><a href="the-dt-element.html#the-dt-element">dt</a></code> or <code><a href="the-dd-element.html#the-dd-element">dd</a></code> elements), do not
  form part of any groups in that <code><a href="#the-dl-element">dl</a></code>.</p>

  <p>If a <code><a href="#the-dl-element">dl</a></code> element has one or more <code><a href="the-dt-element.html#the-dt-element">dt</a></code>
  element children but no <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element children, then it
  consists of one group with names but no values.</p>

  <p>If a <code><a href="#the-dl-element">dl</a></code> element has one or more <code><a href="the-dd-element.html#the-dd-element">dd</a></code>
  element children but no <code><a href="the-dt-element.html#the-dt-element">dt</a></code> element children, then it
  consists of one group with values but no names.</p>

  <p>If a <code><a href="#the-dl-element">dl</a></code> element's first <code><a href="the-dt-element.html#the-dt-element">dt</a></code> or
  <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element child is a <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element, then the
  first group has no associated name.</p>

  <p>If a <code><a href="#the-dl-element">dl</a></code> element's last <code><a href="the-dt-element.html#the-dt-element">dt</a></code> or
  <code><a href="the-dd-element.html#the-dd-element">dd</a></code> element child is a <code><a href="the-dt-element.html#the-dt-element">dt</a></code> element, then the
  last group has no associated value.</p>

  <p class="note">When a <code><a href="#the-dl-element">dl</a></code> element doesn't match its
  content model, it is often due to accidentally using <code><a href="the-dd-element.html#the-dd-element">dd</a></code>
  elements in the place of <code><a href="the-dt-element.html#the-dt-element">dt</a></code> elements and vice
  versa. Conformance checkers can spot such mistakes and might be able
  to advise authors how to correctly use the markup.</p>

  </div>

  <div class="example">
   <p>In the following example, one entry ("Authors") is linked to two
   values ("John" and "Luke").</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt; Authors
 &lt;dd&gt; John
 &lt;dd&gt; Luke
 &lt;dt&gt; Editor
 &lt;dd&gt; Frank
&lt;/dl&gt;</pre>
  </div>

  <div class="example">
   <p>In the following example, one definition is linked to two
   terms.</p>
   <pre>&lt;dl&gt;
 &lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dt lang="en-GB"&gt; &lt;dfn&gt;colour&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dd&gt; A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class="example">
   <p>The following example illustrates the use of the <code><a href="#the-dl-element">dl</a></code>
   element to mark up metadata of sorts. At the end of the example,
   one group has two metadata labels ("Authors" and "Editors") and two
   values ("Robert Rothman" and "Daniel Jackson").</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt; Last modified time &lt;/dt&gt;
 &lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
 &lt;dt&gt; Recommended update interval &lt;/dt&gt;
 &lt;dd&gt; 60s &lt;/dd&gt;
 &lt;dt&gt; Authors &lt;/dt&gt;
 &lt;dt&gt; Editors &lt;/dt&gt;
 &lt;dd&gt; Robert Rothman &lt;/dd&gt;
 &lt;dd&gt; Daniel Jackson &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class="example">

   <p>The following example shows the <code><a href="#the-dl-element">dl</a></code> element used to
   give a set of instructions. The order of the instructions here is
   important (in the other examples, the order of the blocks was not
   important).</p>

   <pre>&lt;p&gt;Determine the victory points as follows (use the
first matching case):&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt;
 &lt;dd&gt; You get five victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get two victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get one victory point &lt;/dd&gt;
 &lt;dt&gt; Otherwise &lt;/dt&gt;
 &lt;dd&gt; You get no victory points &lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <div class="example">
   <p>The following snippet shows a <code><a href="#the-dl-element">dl</a></code> element being used
   as a glossary. Note the use of <code><a href="the-dfn-element.html#the-dfn-element">dfn</a></code> to indicate the
   word being defined.</p>
   <pre>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;Apartment&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;An execution context grouping one or more threads with one or
 more COM objects.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Flat&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;A deflated tire.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Home&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;The user's login directory.&lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>

  <p class="note">The <code><a href="#the-dl-element">dl</a></code> element is inappropriate for
  marking up dialogue. <a href="links.html#conversations">Examples of how to
  mark up dialogue</a> are shown below.</p>



  </body></html>
--- NEW FILE: the-select-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.9 The select element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-button-element.html" title="4.10.8 The button element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-datalist-element.html" title="4.10.10 The datalist 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-button-element.html">&#8592; 4.10.8 The button element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-datalist-element.html">4.10.10 The datalist element &#8594;</a>
  </div>

  <h4 id="the-select-element"><span class="secno">4.10.9 </span>The <dfn><code>select</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#interactive-content-0">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</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#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>Zero or more <code><a href="the-option-element.html#the-option-element">option</a></code> or <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> elements.</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-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-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-select-multiple"><a href="#attr-select-multiple">multiple</a></code></dd>
   <dd><code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-select-required"><a href="#attr-select-required">required</a></code></dd>
   <dd><code title="attr-select-size"><a href="#attr-select-size">size</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="htmlselectelement">HTMLSelectElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-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 boolean <a href="#dom-select-multiple" title="dom-select-multiple">multiple</a>;
           attribute DOMString <a href="attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute boolean <a href="#dom-select-required" title="dom-select-required">required</a>;
           attribute unsigned long <a href="#dom-select-size" title="dom-select-size">size</a>;

  readonly attribute DOMString <a href="#dom-select-type" title="dom-select-type">type</a>;

  readonly attribute <a href="common-dom-interfaces.html#htmloptionscollection-0">HTMLOptionsCollection</a> <a href="#dom-select-options" title="dom-select-options">options</a>;
           attribute unsigned long <a href="#dom-select-length" title="dom-select-length">length</a>;
  getter <a href="infrastructure.html#element">Element</a> <a href="#dom-select-item" title="dom-select-item">item</a>(unsigned long index);
  object <a href="#dom-select-nameditem" title="dom-select-namedItem">namedItem</a>(DOMString name);
  void <a href="#dom-select-add" title="dom-select-add">add</a>((<a href="the-option-element.html#htmloptionelement">HTMLOptionElement</a> or <a href="the-optgroup-element.html#htmloptgroupelement">HTMLOptGroupElement</a>) element, optional (<a href="elements.html#htmlelement">HTMLElement</a> or long)? before = null);
  void <a href="#dom-select-remove" title="dom-select-remove">remove</a>(long index);
  <a href="common-dom-interfaces.html#dom-htmloptionscollection-setter" title="dom-HTMLOptionsCollection-setter">setter creator</a> void (unsigned long index, <a href="the-option-element.html#htmloptionelement">HTMLOptionElement</a> option);

  readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-select-selectedoptions" title="dom-select-selectedOptions">selectedOptions</a>;
           attribute long <a href="#dom-select-selectedindex" title="dom-select-selectedIndex">selectedIndex</a>;
           attribute DOMString <a href="#dom-select-value" title="dom-select-value">value</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);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><!-- Proposals for v2:
       * <select value=""> as an alternative to <option selected>
         http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
         <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
                   src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
    --><p>The <code><a href="#the-select-element">select</a></code> element represents a control for
  selecting amongst a set of options.</p>

  <p>The <dfn id="attr-select-multiple" title="attr-select-multiple"><code>multiple</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If the attribute is
  present, then the <code><a href="#the-select-element">select</a></code> element
  <a href="rendering.html#represents">represents</a> a control for selecting zero or more options
  from the <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a>. If the attribute is absent, then the
  <code><a href="#the-select-element">select</a></code> element <a href="rendering.html#represents">represents</a> a control for
  selecting a single option from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>

  <p>The <dfn id="attr-select-size" title="attr-select-size"><code>size</code></dfn>
  attribute gives the number of options to show to the user. The <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute, if specified, must
  have a value that is a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>
  greater than zero.</p>

  <div class="impl">

  <p>The <dfn id="concept-select-size" title="concept-select-size">display size</dfn> of a
  <code><a href="#the-select-element">select</a></code> element is the result of applying the
  <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the value of
  element's <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute, if
  it has one and parsing it is successful. If applying those rules to
  the attribute's value is not successful, or if the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute is absent, then the
  element's <a href="#concept-select-size" title="concept-select-size">display size</a> is 4
  if the element's <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  content attribute is present, and 1 otherwise.</p>

  </div>

  <p>The <dfn id="concept-select-option-list" title="concept-select-option-list">list of options</dfn>
  for a <code><a href="#the-select-element">select</a></code> element consists of all the
  <code><a href="the-option-element.html#the-option-element">option</a></code> element children of the <code><a href="#the-select-element">select</a></code>
  element, and all the <code><a href="the-option-element.html#the-option-element">option</a></code> element children of all the
  <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element children of the <code><a href="#the-select-element">select</a></code>
  element, in <a href="infrastructure.html#tree-order">tree order</a>.</p>

  <p>The <dfn id="attr-select-required" title="attr-select-required"><code>required</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the
  user will be required to select a value before submitting the
  form.</p>

  <p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
  does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1;
  and if the <a href="the-option-element.html#concept-option-value" title="concept-option-value">value</a> of the
  first <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <code><a href="#the-select-element">select</a></code>
  element's <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a> (if any) is the empty string, and that
  <code><a href="the-option-element.html#the-option-element">option</a></code> element's parent node is the <code><a href="#the-select-element">select</a></code>
  element (and not an <code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element), then that
  <code><a href="the-option-element.html#the-option-element">option</a></code> is the <code><a href="#the-select-element">select</a></code> element's
  <dfn id="placeholder-label-option">placeholder label option</dfn>.</p>

  <p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
  does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1,
  then the <code><a href="#the-select-element">select</a></code> element must have a <a href="#placeholder-label-option">placeholder
  label option</a>.</p>

  <div class="impl">

  <p><strong>Constraint validation</strong>: If the element has its
  <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute
  specified, and either none of the <code><a href="the-option-element.html#the-option-element">option</a></code> elements in
  the <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> have their
  <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true, or the only <code><a href="the-option-element.html#the-option-element">option</a></code> element in the
  <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> with its
  <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true is the <a href="#placeholder-label-option">placeholder label option</a>, then the element
  is <a href="constraints.html#suffering-from-being-missing">suffering from being missing</a>.</p>

  </div>

  <div class="impl">

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent, and the element is not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
  should allow the user to pick an <code><a href="the-option-element.html#the-option-element">option</a></code> element in its
  <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that
  is itself not <a href="the-option-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a>.
  Upon this <code><a href="the-option-element.html#the-option-element">option</a></code> element being <dfn id="concept-select-pick" title="concept-select-pick">picked</dfn> (either through a click, or
  through unfocusing the element after changing its value, or through
  a <a href="commands.html#using-the-option-element-to-define-a-command" title="option-command">menu command</a>, or through any
  other mechanism), and before the relevant user interaction event
  <!-- interaction event spec point --> is queued (e.g. before the
  <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must
  set the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
  picked <code><a href="the-option-element.html#the-option-element">option</a></code> element to true and 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-change">change</code> at the <code><a href="#the-select-element">select</a></code>
  element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the
  task source.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent, whenever an <code><a href="the-option-element.html#the-option-element">option</a></code> element in the
  <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> has its
  <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true, and whenever an <code><a href="the-option-element.html#the-option-element">option</a></code> element with its <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true
  is added to the <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, the user
  agent must set the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  other <code><a href="the-option-element.html#the-option-element">option</a></code> element in its <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to
  false.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent and the element's <a href="#concept-select-size" title="concept-select-size">display size</a> is greater than 1,
  then the user agent should also allow the user to request that the
  <code><a href="the-option-element.html#the-option-element">option</a></code> whose <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, if
  any, be unselected. Upon this request being conveyed to the user
  agent, and before the relevant user interaction event <!--
  interaction event spec point --> is queued (e.g. before the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must set the
  <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of
  that <code><a href="the-option-element.html#the-option-element">option</a></code> element to false and 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-change">change</code> at the <code><a href="#the-select-element">select</a></code>
  element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the
  task source.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent and the element's <a href="#concept-select-size" title="concept-select-size">display size</a> is 1, then whenever
  there are no <code><a href="the-option-element.html#the-option-element">option</a></code> elements in the <code><a href="#the-select-element">select</a></code>
  element's <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a> that have their <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  the user agent must set the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the first
  <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that is not <a href="the-option-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a>, if any, to
  true.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is present, and the element is not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
  should allow the user to <dfn id="concept-select-toggle" title="concept-select-toggle">toggle</dfn> the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements in its <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that are
  themselves not <a href="the-option-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a>
  (either through a click, or through a <a href="commands.html#using-the-option-element-to-define-a-command" title="option-command">menu command</a>, or any other mechanism).
  Upon the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of one or
  more <code><a href="the-option-element.html#the-option-element">option</a></code> elements being changed by the user, and
  before the relevant user interaction event <!-- interaction event
  spec point --> is queued (e.g. before a related <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must
  <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-change">change</code> at the
  <code><a href="#the-select-element">select</a></code> element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task
  source</a> as the task source.</p>

  <p>The <a href="constraints.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-select-element">select</a></code> elements is to go through
  all the <code><a href="the-option-element.html#the-option-element">option</a></code> elements in the element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, and set
  their <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a>
  to true if the <code><a href="the-option-element.html#the-option-element">option</a></code> element has a <code title="attr-option-selected"><a href="the-option-element.html#attr-option-selected">selected</a></code> attribute, and false
  otherwise.</p>

  </div>

  <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-select-element">select</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. The <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">select</var> . <code title="dom-select-type"><a href="#dom-select-type">type</a></code></dt>

   <dd>

    <p>Returns "<code title="">select-multiple</code>" if the element
    has a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
    attribute, and "<code title="">select-one</code>"
    otherwise.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-options"><a href="#dom-select-options">options</a></code></dt>

   <dd>

    <p>Returns an <code><a href="common-dom-interfaces.html#htmloptionscollection-0">HTMLOptionsCollection</a></code> of the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-length"><a href="#dom-select-length">length</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the number of elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
    <p>When set to a smaller number, truncates the number of <code><a href="the-option-element.html#the-option-element">option</a></code> elements in the <code><a href="#the-select-element">select</a></code>.</p>
    <p>When set to a greater number, adds new blank <code><a href="the-option-element.html#the-option-element">option</a></code> elements to the <code><a href="#the-select-element">select</a></code>.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title="dom-select-item"><a href="#dom-select-item">item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">select</var>[<var title="">index</var>]</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title="dom-select-item"><a href="#dom-select-item">namedItem</a></code>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with <a href="infrastructure.html#concept-id" title="concept-id">ID</a> or <code title="attr-option-name"><a href="obsolete.html#attr-option-name">name</a></code> <var title="">name</var> from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
    <p>If there are multiple matching items, then a <code><a href="infrastructure.html#nodelist">NodeList</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that <a href="infrastructure.html#concept-id" title="concept-id">ID</a> could be found.</p>
   </dd>

   <dt><var title="">select</var> . <code title="dom-select-add"><a href="#dom-select-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ])</dt>
   <dd>
    <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
    <p>The <var title="">before</var> argument can be a number, in
    which case <var title="">element</var> is inserted before the item
    with that number, or an element from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, in
    which case <var title="">element</var> is inserted before that
    element.</p>
    <p>If <var title="">before</var> is omitted, null, or a number out
    of range, then <var title="">element</var> will be added at the
    end of the list.</p>
    <p>This method will throw a <code><a href="infrastructure.html#hierarchyrequesterror">HierarchyRequestError</a></code>
    exception if <var title="">element</var> is an ancestor of the
    element into which it is to be inserted.</p>
   </dd>

   <dt><var title="">select</var> . <code title="dom-select-selectedOptions"><a href="#dom-select-selectedoptions">selectedOptions</a></code></dt>

   <dd>

    <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that are
    selected.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-selectedIndex"><a href="#dom-select-selectedindex">selectedIndex</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the index of the first selected item, if any, or
    &#8722;1 if there is no selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-value"><a href="#dom-select-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of the
    first selected item, if any, or the empty string if there is no
    selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-select-type" title="dom-select-type"><code>type</code></dfn> IDL
  attribute, on getting, must return the string "<code title="">select-one</code>" if the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is absent,
  and the string "<code title="">select-multiple</code>" if the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is
  present.</p>

  <p>The <dfn id="dom-select-options" title="dom-select-options"><code>options</code></dfn>
  IDL attribute must return an <code><a href="common-dom-interfaces.html#htmloptionscollection-0">HTMLOptionsCollection</a></code>
  rooted at the <code><a href="#the-select-element">select</a></code> node, whose filter matches the
  elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a>.</p>

  <p>The <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection is
  also mirrored on the <code><a href="#htmlselectelement">HTMLSelectElement</a></code> object. The
  <a href="infrastructure.html#supported-property-indices">supported property indices</a> at any instant are the
  indices supported by the object returned by the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> attribute at that
  instant.</p>

  <p>The <dfn id="dom-select-length" title="dom-select-length"><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href="infrastructure.html#represented-by-the-collection" title="represented
  by the collection">represented</a> by the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection. On setting, it
  must act like the attribute of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection.</p>

  <p>The <dfn id="dom-select-item" title="dom-select-item"><code>item(<var title="">index</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection, when invoked
  with the same argument.</p>

  <p>The <dfn id="dom-select-nameditem" title="dom-select-namedItem"><code>namedItem(<var title="">name</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection, when invoked
  with the same argument.</p>

  <p>When the user agent is to <dfn id="dom-htmlselectelement-setter" title="dom-HTMLSelectElement-setter">set the value of a new indexed
  property</dfn> for a given property index <var title="">index</var>
  to a new value <var title="">value</var>, it must instead <a href="common-dom-interfaces.html#dom-htmloptionscollection-setter" title="dom-HTMLOptionsCollection-setter">set the value of a new
  indexed property</a> with the given property index <var title="">index</var> to the new value <var title="">value</var> on the
  <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection.</p>

  <p>Similarly, the <dfn id="dom-select-add" title="dom-select-add"><code>add()</code></dfn> and <dfn id="dom-select-remove" title="dom-select-remove"><code>remove()</code></dfn> methods must
  act like their namesake methods on that same <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection.</p>

  <p>The <dfn id="dom-select-selectedoptions" title="dom-select-selectedOptions"><code>selectedOptions</code></dfn>
  IDL attribute must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at
  the <code><a href="#the-select-element">select</a></code> node, whose filter matches the elements in
  the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>
  that have their <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-selectedindex" title="dom-select-selectedIndex"><code>selectedIndex</code></dfn>
  IDL attribute, on getting, must return the <a href="the-option-element.html#concept-option-index" title="concept-option-index">index</a> of the first
  <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that has its <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  if any. If there isn't one, then it must return &#8722;1.</p>

  <p>On setting, the <code title="dom-select-selectedIndex"><a href="#dom-select-selectedindex">selectedIndex</a></code> attribute must
  set the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to false,
  and then the <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> whose
  <a href="the-option-element.html#concept-option-index" title="concept-option-index">index</a> is the given new
  value, if any, must have its <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-value" title="dom-select-value"><code>value</code></dfn> IDL
  attribute, on getting, must return the <a href="the-option-element.html#concept-option-value" title="concept-option-value">value</a> of the first
  <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that has its <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  if any. If there isn't one, then it must return the empty
  string.</p>

  <p>On setting, the <code title="dom-select-value"><a href="#dom-select-value">value</a></code>
  attribute must set the <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to false,
  and then the first <code><a href="the-option-element.html#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, in
  <a href="infrastructure.html#tree-order">tree order</a>, whose <a href="the-option-element.html#concept-option-value" title="concept-option-value">value</a> is equal to the given new
  value, if any, must have its <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-multiple" title="dom-select-multiple"><code>multiple</code></dfn>,
  <dfn id="dom-select-required" title="dom-select-required"><code>required</code></dfn>, and
  <dfn id="dom-select-size" title="dom-select-size"><code>size</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name. The <code title="dom-select-size"><a href="#dom-select-size">size</a></code> IDL
  attribute has a default value of zero.</p> <!-- see bug 12288 for
  compat reasons why .size allows zero (it's not limited to values
  greater than zero) even though that value really makes no sense -->

  <p class="note">For historical reasons, the default value of the
  <code title="dom-select-size"><a href="#dom-select-size">size</a></code> IDL attribute does not
  return the actual size used, which, in the absence of the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> content attribute, is either 1
  or 4 depending on the presence of the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute.</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-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>
<!--TOPIC:HTML-->

  <div class="example">

   <p>The following example shows how a <code><a href="#the-select-element">select</a></code> element
   can be used to offer the user with a set of options from which the
   user can select a single option. The default option is
   preselected.</p>

   <pre>&lt;p&gt;
 &lt;label for="unittype"&gt;Select unit type:&lt;/label&gt;
 &lt;select id="unittype" name="unittype"&gt;
  &lt;option value="1"&gt; Miner &lt;/option&gt;
  &lt;option value="2"&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4"&gt; Max &lt;/option&gt;
  &lt;option value="5"&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

   <p>When there is no default option, a placeholder can be used
   instead:</p>

   <pre>&lt;select name="unittype" <strong>required</strong>&gt;
 <strong>&lt;option value=""&gt; Select unit type &lt;/option&gt;</strong>
 &lt;option value="1"&gt; Miner &lt;/option&gt;
 &lt;option value="2"&gt; Puffer &lt;/option&gt;
 &lt;option value="3"&gt; Snipey &lt;/option&gt;
 &lt;option value="4"&gt; Max &lt;/option&gt;
 &lt;option value="5"&gt; Firebot &lt;/option&gt;
&lt;/select&gt;</pre>

  </div>

  <div class="example">

   <p>Here, the user is offered a set of options from which he can
   select any number. By default, all five options are selected.</p>

   <pre>&lt;p&gt;
 &lt;label for="allowedunits"&gt;Select unit types to enable on this map:&lt;/label&gt;
 &lt;select id="allowedunits" name="allowedunits" multiple&gt;
  &lt;option value="1" selected&gt; Miner &lt;/option&gt;
  &lt;option value="2" selected&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4" selected&gt; Max &lt;/option&gt;
  &lt;option value="5" selected&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>Sometimes, a user has to select one or more items. This example
   shows such an interface.</p>

   <pre>&lt;p&gt;Select the songs from that you would like on your Act II Mix Tape:&lt;/p&gt;
&lt;select multiple required name="act2"&gt;
 &lt;option value="s1"&gt;It Sucks to Be Me (Reprise)
 &lt;option value="s2"&gt;There is Life Outside Your Apartment
 &lt;option value="s3"&gt;The More You Ruv Someone
 &lt;option value="s4"&gt;Schadenfreude
 &lt;option value="s5"&gt;I Wish I Could Go Back to College
 &lt;option value="s6"&gt;The Money Song
 &lt;option value="s7"&gt;School for Monsters
 &lt;option value="s8"&gt;The Money Song (Reprise)
 &lt;option value="s9"&gt;There's a Fine, Fine Line (Reprise)
 &lt;option value="s10"&gt;What Do You Do With a B.A. in English? (Reprise)
 &lt;option value="s11"&gt;For Now
&lt;/select&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: editing-apis.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>7.6.4 Editing APIs &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="editing.html" title="7 User interaction" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="dnd.html" title="7.7 Drag and drop" 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="editing.html">&#8592; 7 User interaction</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="dnd.html">7.7 Drag and drop &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="editing-apis.html#editing-apis"><span class="secno">7.6.4 </span>Editing APIs</a></li><li><a href="editing-apis.html#spelling-and-grammar-checking"><span class="secno">7.6.5 </span>Spelling and grammar checking</a></li></ol></li></ol></li></ol></div>

  <h4 id="editing-apis"><span class="secno">7.6.4 </span>Editing APIs</h4>

  <p>The definition of the terms <dfn id="active-range">active range</dfn>, <dfn id="editing-host">editing
  host</dfn>, and <dfn id="editable">editable</dfn>, the user interface requirements
  of elements that are <a href="#editing-host" title="editing host">editing hosts</a>
  or <a href="#editable">editable</a>, the

  <dfn id="execCommand" title="dom-document-execCommand"><code>execCommand()</code></dfn>,
  <dfn id="dom-document-querycommandenabled" title="dom-document-queryCommandEnabled"><code>queryCommandEnabled()</code></dfn>,
  <dfn id="dom-document-querycommandindeterm" title="dom-document-queryCommandIndeterm"><code>queryCommandIndeterm()</code></dfn>,
  <dfn id="dom-document-querycommandstate" title="dom-document-queryCommandState"><code>queryCommandState()</code></dfn>,
  <dfn id="dom-document-querycommandsupported" title="dom-document-queryCommandSupported"><code>queryCommandSupported()</code></dfn>, and
  <dfn id="dom-document-querycommandvalue" title="dom-document-queryCommandValue"><code>queryCommandValue()</code></dfn>

  methods, and text selections are defined in the HTML Editing APIs
  specification. The interaction of editing and the undo/redo features
  in user agents is defined by the UndoManager and DOM Transaction
  specification. <a href="references.html#refsEDITING">[EDITING]</a> <a href="references.html#refsUNDO">[UNDO]</a></p>

  <!-- those might get merged in here eventually -->



  <h4 id="spelling-and-grammar-checking"><span class="secno">7.6.5 </span>Spelling and grammar checking</h4>

  <div class="impl">

  <p>User agents can support the checking of spelling and grammar of
  editable text, either in form controls (such as the value of
  <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements), or in elements in an <a href="#editing-host">editing
  host</a> (e.g. using <code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code>).</p>

  <p>For each element, user agents must establish a <dfn id="concept-spellcheck-default" title="concept-spellcheck-default">default behavior</dfn>, either
  through defaults or through preferences expressed by the user. There
  are three possible default behaviors for each element:</p>

  <dl><dt><dfn id="concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</dfn>

   </dt><dd>The element will be checked for spelling and grammar if its
   contents are editable.

   </dd><dt><dfn id="concept-spellcheck-default-false" title="concept-spellcheck-default-false">false-by-default</dfn>

   </dt><dd>The element will never be checked for spelling and grammar.

   </dd><dt><dfn id="concept-spellcheck-default-inherit" title="concept-spellcheck-default-inherit">inherit-by-default</dfn>

   </dt><dd>The element's default behavior is the same as its parent
   element's. Elements that have no parent element cannot have this as
   their default behavior.

  </dd></dl><hr></div>

  <p>The <dfn id="attr-spellcheck" title="attr-spellcheck"><code>spellcheck</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> whose keywords are
  the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
  addition, there is a third state, the <i>default</i> state, which is
  the <i>missing value default</i> (and the <i>invalid value
  default</i>).</p>

  <p class="note">The <i>true</i> state indicates that the element is
  to have its spelling and grammar checked. The <i>default</i> state
  indicates that the element is to act according to a default
  behavior, possibly based on the parent element's own <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> state, as defined below.
  The <i>false</i> state indicates that the element is not to be
  checked.</p>

  <div class="impl">

  <hr></div>

  <dl class="domintro"><dt><var title="">element</var> . <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns true if the element is to have its spelling and grammar
    checked; otherwise, returns false.</p>

    <p>Can be set, to override the default and set the <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-spellcheck" title="dom-spellcheck"><code>spellcheck</code></dfn> IDL
  attribute, on getting, must return true if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute is in
  the <i>true</i> state, or if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute is in
  the <i>default</i> state and the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</a>, or
  if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code>
  content attribute is in the <i>default</i> state and the element's
  <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is
  <a href="#concept-spellcheck-default-inherit" title="concept-spellcheck-default-inherit">inherit-by-default</a>
  and the element's parent element's <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> IDL attribute would return
  true; otherwise, if none of those conditions applies, then the
  attribute must instead return false.</p>

  <p class="note">The <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code>
  IDL attribute is not affected by user preferences that override the
  <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute,
  and therefore might not reflect the actual spellchecking state.</p>

  <p>On setting, if the new value is true, then the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute must be
  set to the literal string "<code title="">true</code>", otherwise it
  must be set to the literal string "<code title="">false</code>".

  </p><hr><p>User agents must only consider the following pieces of text as
  checkable for the purposes of this feature:</p>

  <ul><li>The value of <code><a href="the-input-element.html#the-input-element">input</a></code> elements to which the <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute applies,
   whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attributes are not
   in the <a href="states-of-the-type-attribute.html#password-state-(type=password)" title="attr-input-type-password">Password</a>
   state, and that are not <i title="concept-input-immutable"><a href="the-input-element.html#concept-input-immutable">immutable</a></i> (i.e. that do not
   have the <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>
   attribute specified and that are not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>).</li>

   <li>The value of <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements that do not have a
   <code title="attr-textarea-readonly"><a href="the-textarea-element.html#attr-textarea-readonly">readonly</a></code> attribute and
   that are not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</li>

   <li>Text in <code><a href="infrastructure.html#text-0">Text</a></code> nodes that are
   children of <a href="#editing-host" title="editing host">editing hosts</a> or
   <a href="#editable">editable</a> elements.</li>

   <li>Text in attributes of <a href="#editable">editable</a> elements.</li>

  </ul><p>For text that is part of a <code><a href="infrastructure.html#text-0">Text</a></code> node, the element
  with which the text is associated is the element that is the
  immediate parent of the first character of the word, sentence, or
  other piece of text. For text in attributes, it is the attribute's
  element. For the values 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, it is the element itself.</p>

  <p>To determine if a word, sentence, or other piece of text in an
  applicable element (as defined above) is to have spelling- and/or
  grammar-checking enabled, the UA must use the following
  algorithm:</p>

  <ol><!-- user override --><li>If the user has disabled the checking for this text, then the
   checking is disabled.</li>

   <li>Otherwise, if the user has forced the checking for this text to
   always be enabled, then the checking is enabled.</li>

   <!-- content attribute: on, off -->

   <li>Otherwise, if the element with which the text is associated has
   a <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content
   attribute, then: if that attribute is in the <i>true</i> state,
   then checking is enabled; otherwise, if that attribute is in the
   <i>false</i> state, then checking is disabled.</li>

   <!-- inherit, if there is one to inherit from -->

   <li>Otherwise, if there is an ancestor element with a <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute that is
   not in the <i>default</i> state, then: if the nearest such
   ancestor's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content
   attribute is in the <i>true</i> state, then checking is enabled;
   otherwise, checking is disabled.</li>

   <!-- default -->

   <li>Otherwise, if the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</a>,
   then checking is enabled.</li>

   <li>Otherwise, if the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-false" title="concept-spellcheck-default-false">false-by-default</a>,
   then checking is disabled.</li>

   <!-- default inheritance -->

   <li>Otherwise, if the element's parent element has <em>its</em>
   checking enabled, then checking is enabled.</li>

   <li>Otherwise, checking is disabled.</li>

  </ol><p>If the checking is enabled for a word/sentence/text, the user
  agent should indicate spelling and/or grammar errors in that
  text. User agents should take into account the other semantics given
  in the document when suggesting spelling and grammar
  corrections. User agents may use the language of the element to
  determine what spelling and grammar rules to use, or may use the
  user's preferred language settings. UAs should use
  <code><a href="the-input-element.html#the-input-element">input</a></code> element attributes such as <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code> to ensure that the
  resulting value is valid, where possible.</p>

  <p>If checking is disabled, the user agent should not indicate
  spelling or grammar errors for that text.</p>

  <div class="example">

   <p>The element with ID "a" in the following example would be the
   one used to determine if the word "Hello" is checked for spelling
   errors. In this example, it would not be.</p>

   <pre>&lt;div contenteditable="true"&gt;
 &lt;span spellcheck="false" id="a"&gt;Hell&lt;/span&gt;&lt;em&gt;o!&lt;/em&gt;
&lt;/div&gt;</pre>

   <p>The element with ID "b" in the following example would have
   checking enabled (the leading space character in the attribute's
   value on the <code><a href="the-input-element.html#the-input-element">input</a></code> element causes the attribute to be
   ignored, so the ancestor's value is used instead, regardless of the
   default).</p>

   <pre>&lt;p spellcheck="true"&gt;
 &lt;label&gt;Name: &lt;input spellcheck=" false" id="b"&gt;&lt;/label&gt;
&lt;/p&gt;</pre>

  </div>

  </div>

  <p class="note">This specification does not define the user
  interface for spelling and grammar checkers. A user agent could
  offer on-demand checking, could perform continuous checking while
  the checking is enabled, or could use other interfaces.</p>


  </body></html>
--- NEW FILE: dom.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3 Semantics, structure, and APIs of HTML documents &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1105 lines suppressed...]
     fire the 'load' event -->

     <li><p><a href="webappapis.html#fire-a-simple-event">Fire a simple event</a> named <code title="event-load">load</code> at <var title="">document</var>.</p></li>

    </ol></li>
<!--SYNCLOAD
   <li><p>If <code title="dom-XMLDocument-async">async</code>
   was set to false when this algorithm started, let <var
   title="">document</var> be no longer
   <span>load-blocked</span>.</p></li>

   <li><p>If <code title="dom-XMLDocument-async">async</code>
   was set to false when this algorithm started, return <var
   title="">success</var>.</p></li>
-->
  </ol></div>


<!--TOPIC:HTML-->
  </body></html>
--- NEW FILE: the-xhtml-syntax.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>9 The XHTML syntax &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="named-character-references.html" title="8.5 Named character references" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="rendering.html" title="10 Rendering" 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="named-character-references.html">&#8592; 8.5 Named character references</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="rendering.html">10 Rendering &#8594;</a>
  <ol class="toc"><li><a href="the-xhtml-syntax.html#the-xhtml-syntax"><span class="secno">9 </span>The XHTML syntax</a>
  <ol><li><a href="the-xhtml-syntax.html#writing-xhtml-documents"><span class="secno">9.1 </span>Writing XHTML documents</a></li><li><a href="the-xhtml-syntax.html#parsing-xhtml-documents"><span class="secno">9.2 </span>Parsing XHTML documents</a></li><li><a href="the-xhtml-syntax.html#serializing-xhtml-fragments"><span class="secno">9.3 </span>Serializing XHTML fragments</a></li><li><a href="the-xhtml-syntax.html#parsing-xhtml-fragments"><span class="secno">9.4 </span>Parsing XHTML fragments</a></li></ol></li></ol></div>

  <h2 id="the-xhtml-syntax"><span class="secno">9 </span><dfn id="xhtml">The XHTML syntax</dfn></h2>

  <p class="note">This section only describes the rules for XML
  resources. Rules for <code><a href="iana.html#text/html">text/html</a></code> resources are discussed
  in the section above entitled "<a href="syntax.html#syntax">The HTML syntax</a>".</p>


  <div class="impl">

  <h3 id="writing-xhtml-documents"><span class="secno">9.1 </span>Writing XHTML documents</h3>

  </div>

  <p>The syntax for using HTML with XML, whether in XHTML documents or
  embedded in other XML documents, is defined in the XML and
  Namespaces in XML specifications. <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a></p>

  <p>This specification does not define any syntax-level requirements
  beyond those defined for XML proper.</p>

  <p>XML documents may contain a <code>DOCTYPE</code> if desired, but
  this is not required to conform to this specification. This
  specification does not define a public or system identifier, nor
  provide a format DTD.</p>

  <p class="note">According to the XML specification, XML processors
  are not guaranteed to process the external DTD subset referenced in
  the DOCTYPE. This means, for example, that using entity references
  for characters in XHTML documents is unsafe if they are defined in
  an external file (except for <code title="">&amp;lt;</code>, <code title="">&amp;gt;</code>, <code title="">&amp;amp;</code>, <code title="">&amp;quot;</code> and <code title="">&amp;apos;</code>).</p>


  <div class="impl">

  <h3 id="parsing-xhtml-documents"><span class="secno">9.2 </span>Parsing XHTML documents</h3>

  <p>This section describes the relationship between XML and the DOM,
  with a particular emphasis on how this interacts with HTML.</p>

  <p>An <dfn id="xml-parser">XML parser</dfn>, for the purposes of this specification,
  is a construct that follows the rules given in the XML specification
  to map a string of bytes or characters into a <code><a href="dom.html#document">Document</a></code>
  object.</p>

  <p>An <a href="#xml-parser">XML parser</a> is either associated with a
  <code><a href="dom.html#document">Document</a></code> object when it is created, or creates one
  implicitly.</p>

  <p>This <code><a href="dom.html#document">Document</a></code> must then be populated with DOM nodes
  that represent the tree structure of the input passed to the parser,
  as defined by the XML specification, the Namespaces in XML
  specification, and the DOM Core specification. DOM mutation events
  must not fire for the operations that the <a href="#xml-parser">XML parser</a>
  performs on the <code><a href="dom.html#document">Document</a></code>'s tree, but the user agent
  must act as if elements and attributes were individually appended
  and set respectively so as to trigger rules in this specification
  regarding what happens when an element is inserted into a document
  or has its attributes set. <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a> <a href="references.html#refsDOMCORE">[DOMCORE]</a>
  <a href="references.html#refsDOMEVENTS">[DOMEVENTS]</a></p>

  <p>Between the time an element's start tag is parsed and the time
  either the element's end tag is parsed or the parser detects a
  well-formedness error, the user agent must act as if the element was
  in a <a href="parsing.html#stack-of-open-elements">stack of open elements</a>.</p>

  <p class="note">This is used by the <code><a href="the-object-element.html#the-object-element">object</a></code> element to
  avoid instantiating plugins before the <code><a href="the-param-element.html#the-param-element">param</a></code> element
  children have been parsed.</p>

  <p>This specification provides the following additional information
  that user agents should use when retrieving an external entity: the
  public identifiers given in the following list all correspond to <a href="&lt;!--BOILERPLATE%20entities-dtd.url--&gt;">the URL given by this
  link</a>. (This URL is a DTD containing the entity reference
  declarations for the names listed in the <a href="named-character-references.html#named-character-references">named character
  references</a> section.)</p>

  <ul class="brief"><li><code title="">-//W3C//DTD&#160;XHTML&#160;1.0&#160;Transitional//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;1.1//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;1.0&#160;Strict//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;1.0&#160;Frameset//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;Basic&#160;1.0//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;1.1&#160;plus&#160;MathML&#160;2.0//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;XHTML&#160;1.1&#160;plus&#160;MathML&#160;2.0&#160;plus&#160;SVG&#160;1.1//EN</code></li>
   <li><code title="">-//W3C//DTD&#160;MathML&#160;2.0//EN</code></li>
   <li><code title="">-//WAPFORUM//DTD&#160;XHTML&#160;Mobile&#160;1.0//EN</code></li>
  </ul><p>Furthermore, user agents should attempt to retrieve the above
  external entity's content when one of the above public identifiers
  is used, and should not attempt to retrieve any other external
  entity's content.</p>

  <p class="note">This is not strictly a <a href="introduction.html#willful-violation" title="willful
  violation">violation</a> of the XML specification, but it does
  contradict the spirit of the XML specification's requirements. This
  is motivated by a desire for user agents to all handle entities in
  an interoperable fashion without requiring any network access for
  handling external subsets. <a href="references.html#refsXML">[XML]</a></p>

  <p id="scriptTagXML">When an <a href="#xml-parser">XML parser</a> creates a
  <code><a href="the-script-element.html#the-script-element">script</a></code> element, it must be marked as being
  <a href="the-script-element.html#parser-inserted">"parser-inserted"</a> and its <a href="the-script-element.html#force-async">"force-async"</a>
  flag must be unset. If the parser was originally created for the
  <a href="#xml-fragment-parsing-algorithm">XML fragment parsing algorithm</a>, then the element must
  be marked as <a href="the-script-element.html#already-started">"already started"</a> also. When the element's
  end tag is parsed, the user agent must <a href="webappapis.html#provide-a-stable-state">provide a stable
  state</a>, and then <a href="the-script-element.html#prepare-a-script" title="prepare a script">prepare</a>
  the <code><a href="the-script-element.html#the-script-element">script</a></code> element. If this causes there to be a
  <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking script</a>, then the user agent
  must run the following steps:</p>

  <ol><li><p>Block this instance of the <a href="#xml-parser">XML parser</a>, such
   that the <a href="webappapis.html#event-loop">event loop</a> will not run <a href="webappapis.html#concept-task" title="concept-task">tasks</a> that invoke it.</p></li>

   <li><p><a href="webappapis.html#spin-the-event-loop">Spin the event loop</a> until the parser's
   <code><a href="dom.html#document">Document</a></code> <a href="styling.html#has-no-style-sheet-that-is-blocking-scripts">has no style sheet that is blocking
   scripts</a> and the <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking
   script</a>'s <a href="the-script-element.html#ready-to-be-parser-executed">"ready to be parser-executed"</a> flag is
   set.</p></li>

   <li><p>Unblock this instance of the <a href="#xml-parser">XML parser</a>, such
   that <a href="webappapis.html#concept-task" title="concept-task">tasks</a> that invoke it can
   again be run.</p></li>

   <li><p><a href="the-script-element.html#execute-the-script-block" title="execute the script block">Execute</a> the
   <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking script</a>.</p></li>

   <li><p>There is no longer a <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking
   script</a>.</p></li>

  </ol><p class="note">Since the <code title="dom-document-write"><a href="dynamic-markup-insertion.html#dom-document-write">document.write()</a></code> API is not
  available for <a href="infrastructure.html#xml-documents">XML documents</a>, much of the complexity in
  the <a href="parsing.html#html-parser">HTML parser</a> is not needed in the <a href="#xml-parser">XML
  parser</a>.</p>

  <p>Certain algorithms in this specification <dfn id="feed-the-parser" title="feed the
  parser">spoon-feed the parser</dfn> characters one string at a
  time. In such cases, the <a href="#xml-parser">XML parser</a> must act as it
  would have if faced with a single string consisting of the
  concatenation of all those characters.</p>

  <p>When an <a href="#xml-parser">XML parser</a> reaches the end of its input, it
  must <a href="the-end.html#stop-parsing">stop parsing</a>, following the same rules as the
  <a href="parsing.html#html-parser">HTML parser</a>. An <a href="#xml-parser">XML parser</a> can also be
  <a href="the-end.html#abort-a-parser" title="abort a parser">aborted</a>, which must again by
  done in the same way as for an <a href="parsing.html#html-parser">HTML parser</a>.</p>

  <p>For the purposes of conformance checkers, if a resource is
  determined to be in <a href="#the-xhtml-syntax">the XHTML syntax</a>, then it is an
  <a href="infrastructure.html#xml-documents" title="XML documents">XML document</a>.</p>



  <h3 id="serializing-xhtml-fragments"><span class="secno">9.3 </span>Serializing XHTML fragments</h3>

  <p>The <dfn id="xml-fragment-serialization-algorithm">XML fragment serialization algorithm</dfn> for a
  <code><a href="dom.html#document">Document</a></code> or <code><a href="infrastructure.html#element">Element</a></code> node either returns a
  fragment of XML that represents that node or throws an
  exception.</p>

  <p>For <code><a href="dom.html#document">Document</a></code>s, the algorithm must return a string in
  the form of a <a href="http://www.w3.org/TR/xml/#sec-well-formed">document
  entity</a>, if none of the error cases below apply.</p>

  <p>For <code><a href="infrastructure.html#element">Element</a></code>s, the algorithm must return a string in
  the form of an <a href="http://www.w3.org/TR/xml/#wf-entities">internal general parsed
  entity</a>, if none of the error cases below apply.</p>

  <p>In both cases, the string returned must be XML
  namespace-well-formed and must be an isomorphic serialization of all
  of that node's child nodes, in <a href="infrastructure.html#tree-order">tree order</a>. User agents
  may adjust prefixes and namespace declarations in the serialization
  (and indeed might be forced to do so in some cases to obtain
  namespace-well-formed XML). User agents may use a combination of
  regular text and character references to represent
  <code><a href="infrastructure.html#text-0">Text</a></code> nodes in the DOM.</p>

  <p>For <code><a href="infrastructure.html#element">Element</a></code>s, if any of the elements in the
  serialization are in no namespace, the default namespace in scope
  for those elements must be explicitly declared as the empty
  string.<!-- because otherwise round-tripping might break since it'll
  pick up the surrounding default ns when setting --> (This doesn't
  apply in the <code><a href="dom.html#document">Document</a></code> case.) <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a></p>

  <p>For the purposes of this section, an internal general parsed
  entity is considered XML namespace-well-formed if a document
  consisting of an element with no namespace declarations whose
  contents are the internal general parsed entity would itself be XML
  namespace-well-formed.</p>

  <p>If any of the following error cases are found in the DOM subtree
  being serialized, then the algorithm must throw an
  <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception instead of returning a
  string:</p>

  <ul><li>A <code><a href="dom.html#document">Document</a></code> node with no child element nodes.</li>

   <li>A <code><a href="infrastructure.html#documenttype">DocumentType</a></code> node that has an external subset
   public identifier that contains characters that are not matched by
   the XML <code title="">PubidChar</code> production. <a href="references.html#refsXML">[XML]</a></li>

   <li>A <code><a href="infrastructure.html#documenttype">DocumentType</a></code> node that has an external subset
   system identifier that contains both a """ (U+0022)
   and a "'" (U+0027) or that contains characters that are
   not matched by the XML <code title="">Char</code> production. <a href="references.html#refsXML">[XML]</a></li>

   <li>A node with a <!--prefix or--> local name containing a ":" (U+003A).</li> <!--(prefixes can get adjusted, so this isn't an
   excuse) -->

   <li>A node with a <!--prefix or--> local name that does not match
   the XML <code title="">Name</code> production. <a href="references.html#refsXML">[XML]</a></li> <!--(again, prefixes can get
   adjusted, so this isn't an excuse) -->

   <li>An <code><a href="infrastructure.html#attr">Attr</a></code> node with no namespace whose local name is
   the lowercase string "<code title="">xmlns</code>". <a href="references.html#refsXMLNS">[XMLNS]</a></li>

   <li>An <code><a href="infrastructure.html#element">Element</a></code> node with two or more attributes with
   the same local name and namespace.</li>

   <li>An <code><a href="infrastructure.html#attr">Attr</a></code> node, <code><a href="infrastructure.html#text-0">Text</a></code> node,
   <code><a href="infrastructure.html#comment-0">Comment</a></code> node, or <code><a href="infrastructure.html#processinginstruction">ProcessingInstruction</a></code>
   node whose data contains characters that are not matched by the XML
   <code title="">Char</code> production. <a href="references.html#refsXML">[XML]</a></li>

   <li>A <code><a href="infrastructure.html#comment-0">Comment</a></code> node whose data contains two adjacent
   "-" (U+002D) characters or ends with such a
   character.</li>

   <li>A <code><a href="infrastructure.html#processinginstruction">ProcessingInstruction</a></code> node whose target name is
   an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">xml</code>".</li>

   <li>A <code><a href="infrastructure.html#processinginstruction">ProcessingInstruction</a></code> node whose target name
   contains a ":" (U+003A).</li>

   <li>A <code><a href="infrastructure.html#processinginstruction">ProcessingInstruction</a></code> node whose data contains
   the string "<code title="">?&gt;</code>".</li>

  </ul><p class="note">These are the only ways to make a DOM
  unserializable. The DOM enforces all the other XML constraints; for
  example, trying to append two elements to a <code><a href="dom.html#document">Document</a></code>
  node will throw a <code><a href="infrastructure.html#hierarchyrequesterror">HierarchyRequestError</a></code> exception.</p>



  <h3 id="parsing-xhtml-fragments"><span class="secno">9.4 </span>Parsing XHTML fragments</h3>

  <p>The <dfn id="xml-fragment-parsing-algorithm">XML fragment parsing algorithm</dfn> either returns a
  <code><a href="dom.html#document">Document</a></code> or throws a <code><a href="infrastructure.html#syntaxerror">SyntaxError</a></code> exception.
  Given a string <var title="">input</var> and an optional context
  element <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var>, the
  algorithm is as follows:</p>

  <ol><li>

    <p>Create a new <a href="#xml-parser">XML parser</a>.</p>

   </li>

   <li>

    <p>If there is a <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element,
    <a href="#feed-the-parser">feed the parser</a> just created the string corresponding
    to the start tag of that element, declaring all the namespace
    prefixes that are in scope on that element in the DOM, as well as
    declaring the default namespace (if any) that is in scope on that
    element in the DOM.</p>

    <p>A namespace prefix is in scope if the DOM Core <code title="">lookupNamespaceURI()</code> method on the element would
    return a non-null value for that prefix.</p>

    <p>The default namespace is the namespace for which the DOM Core
    <code title="">isDefaultNamespace()</code> method on the element
    would return true.</p>

    <p class="note">If there is a <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element, no <code title="">DOCTYPE</code> is passed to the parser, and therefore no
    external subset is referenced, and therefore no entities will be
    recognized.</p>

   </li>

   <li>

    <p><a href="#feed-the-parser">Feed the parser</a> just created the string <var title="">input</var>.</p>

   </li>

   <li>

    <p>If there is a <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element,
    <a href="#feed-the-parser">feed the parser</a> just created the string corresponding
    to the end tag of that element.</p>

   </li>

   <li>

    <p>If there is an XML well-formedness or XML namespace
    well-formedness error, then throw a <code><a href="infrastructure.html#syntaxerror">SyntaxError</a></code>
    exception and abort these steps.</p>

   </li>

   <li>

    <p>If there is a <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element, then
    return the child nodes of the root element of the resulting
    <code><a href="dom.html#document">Document</a></code>, 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></div>


<!--TOPIC:Rendering-->

  </body></html>
--- NEW FILE: the-colgroup-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.3 The colgroup element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-caption-element.html" title="4.9.2 The caption element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-col-element.html" title="4.9.4 The col 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-caption-element.html">&#8592; 4.9.2 The caption element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-col-element.html">4.9.4 The col element &#8594;</a>
  </div>

  <h4 id="the-colgroup-element"><span class="secno">4.9.3 </span>The <dfn><code>colgroup</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-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code> elements and before any <code><a href="the-thead-element.html#the-thead-element">thead</a></code>,
   <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code>, <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code>, and <code><a href="the-tr-element.html#the-tr-element">tr</a></code>
   elements.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>If the <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute is present: Empty.</dd>
   <dd>If the <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute is absent: Zero or more <code><a href="the-col-element.html#the-col-element">col</a></code> elements.</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-colgroup-span"><a href="#attr-colgroup-span">span</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="htmltablecolelement">HTMLTableColElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute unsigned long <a href="#dom-colgroup-span" title="dom-colgroup-span">span</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-colgroup-element">colgroup</a></code> element <a href="rendering.html#represents">represents</a> a <a href="attributes-common-to-td-and-th-elements.html#concept-column-group" title="concept-column-group">group</a> of one or more <a href="attributes-common-to-td-and-th-elements.html#concept-column" title="concept-column">columns</a> in the <code><a href="the-table-element.html#the-table-element">table</a></code> that
  is its parent, if it has a parent and that is a <code><a href="the-table-element.html#the-table-element">table</a></code>
  element.</p>

  <p>If the <code><a href="#the-colgroup-element">colgroup</a></code> element contains no <code><a href="the-col-element.html#the-col-element">col</a></code>
  elements, then the element may have a <dfn id="attr-colgroup-span" title="attr-colgroup-span"><code>span</code></dfn> content attribute
  specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p>

  <div class="impl">

  <p>The <code><a href="#the-colgroup-element">colgroup</a></code> element and its <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute take part in the
  <a href="attributes-common-to-td-and-th-elements.html#table-model">table model</a>.</p>

  <p>The <dfn id="dom-colgroup-span" title="dom-colgroup-span"><code>span</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The value must be <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
  numbers greater than zero</a>.</p>

  </div>


  </body></html>
--- NEW FILE: converting-html-to-other-formats.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.19 Converting HTML to other formats &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="links.html" title="4.12 Links" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="browsers.html" title="5 Loading Web pages" 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="links.html">&#8592; 4.12 Links</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="browsers.html">5 Loading Web pages &#8594;</a>
  <ol class="toc"><li><ol><li><a href="converting-html-to-other-formats.html#converting-html-to-other-formats"><span class="secno">4.19 </span>Converting HTML to other formats</a>
    <ol><li><a href="converting-html-to-other-formats.html#json"><span class="secno">4.19.1 </span>JSON</a></li></ol></li></ol></li></ol></div>

  <div class="impl">

  <h3 id="converting-html-to-other-formats"><span class="secno">4.19 </span>Converting HTML to other formats</h3>

  <h4 id="json"><span class="secno">4.19.1 </span>JSON</h4>

  <p>Given a list of nodes <var title="">nodes</var> in a
  <code><a href="dom.html#document">Document</a></code>, a user agent must run the following algorithm
  to <dfn id="extracting-json" title="extracting JSON">extract the microdata from those
  nodes into a JSON form</dfn>:</p>

  <ol><li><p>Let <var title="">result</var> be an empty object.</p></li>

   <li><p>Let <var title="">items</var> be an empty array.</p></li>

   <li><p>For each <var title="">node</var> in <var title="">nodes</var>, check if the element is a <a href="links.html#top-level-microdata-items" title="top-level microdata items">top-level microdata item</a>,
   and if it is then <a href="#get-the-object">get the object</a> for that element and
   add it to <var title="">items</var>.</p></li>

   <li><p>Add an entry to <var title="">result</var> called "<code title="">items</code>" whose value is the array <var title="">items</var>.</p></li>

   <li><p>Return the result of serializing <var title="">result</var>
   to JSON in the shortest possible way (meaning no whitespace between
   tokens, no unnecessary zero digits in numbers, and only using
   Unicode escapes in strings for characters that do not have a
   dedicated escape sequence), and with a lowercase "<code title="">e</code>" used, when appropriate, in the representation of
   any numbers. <a href="references.html#refsJSON">[JSON]</a></p></li>

  </ol><p class="note">This algorithm returns an object with a single
  property that is an array, instead of just returning an array, so
  that it is possible to extend the algorithm in the future if
  necessary.</p>

  <p>When the user agent is to <dfn id="get-the-object">get the object</dfn> for an item
  <var title="">item</var>, optionally with a list of elements <var title="">memory</var>, it must run the following substeps:</p>

  <ol><li><p>Let <var title="">result</var> be an empty object.</p></li>

   <li><p>Add <var title="">item</var> to <var title="">memory</var>.</p></li>

   <li><p>If the <var title="">item</var> has any <a href="links.html#item-types">item
   types</a>, add an entry to <var title="">result</var> called
   "<code title="">type</code>" whose value is an array listing the
   <a href="links.html#item-types">item types</a> of <var title="">item</var>, in the order
   they were specified on the <code title="attr-itemtype"><a href="links.html#attr-itemtype">itemtype</a></code> attribute.</p>

   </li><li><p>If the <var title="">item</var> has a <a href="links.html#global-identifier">global
   identifier</a>, add an entry to <var title="">result</var>
   called "<code title="">id</code>" whose value is the <a href="links.html#global-identifier">global
   identifier</a> of <var title="">item</var>.</p></li>

   <li><p>Let <var title="">properties</var> be an empty
   object.</p></li>

   <li>

    <p>For each element <var title="">element</var> that has one or
    more <a href="links.html#property-names">property names</a> and is one of <a href="links.html#the-properties-of-an-item" title="the
    properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
    algorithm that returns <a href="links.html#the-properties-of-an-item">the properties of an item</a>, run
    the following substeps:</p>

    <ol><li><p>Let <var title="">value</var> be the <a href="links.html#concept-property-value" title="concept-property-value">property value</a> of <var title="">element</var>.</p></li>

     <li><p>If <var title="">value</var> is an <a href="links.html#concept-item" title="concept-item">item</a>, then: If <var title="">value</var> is in <var title="">memory</var>, then let
     <var title="">value</var> be the string "<code title="">ERROR</code>". Otherwise, <a href="#get-the-object">get the object</a>
     for <var title="">value</var>, passing a copy of <var title="">memory</var>, and then replace <var title="">value</var>
     with the object returned from those steps.</p></li>

     <li>

      <p>For each name <var title="">name</var> in <var title="">element</var>'s <a href="links.html#property-names">property names</a>, run the
      following substeps:</p>

      <ol><li><p>If there is no entry named <var title="">name</var> in
       <var title="">properties</var>, then add an entry named <var title="">name</var> to <var title="">properties</var> whose
       value is an empty array.</p></li>

       <li><p>Append <var title="">value</var> to the entry named <var title="">name</var> in <var title="">properties</var>.</p></li>

      </ol></li>

    </ol></li>

   <li><p>Add an entry to <var title="">result</var> called "<code title="">properties</code>" whose value is the object <var title="">properties</var>.</p></li>

   <li><p>Return <var title="">result</var>.</p></li>

  </ol></div>


  <!--data-component--><!--TOPIC:HTML-->

<!--MD-->


  </body></html>
--- NEW FILE: attributes-common-to-ins-and-del-elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.7.3 Attributes common to ins and del elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-del-element.html" title="4.7.2 The del element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="edits-and-paragraphs.html" title="4.7.4 Edits and paragraphs" 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-del-element.html">&#8592; 4.7.2 The del element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="edits-and-paragraphs.html">4.7.4 Edits and paragraphs &#8594;</a>
  </div>

  <h4 id="attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements</h4>

  <p>The <dfn id="attr-mod-cite" title="attr-mod-cite"><code>cite</code></dfn> attribute
  may be used to specify the address of a document that explains the
  change. When that document is long, for instance the minutes of a
  meeting, authors are encouraged to include a fragment identifier
  pointing to the specific part of that document that discusses the
  change.</p>

  <p>If the <code title="attr-mod-cite"><a href="#attr-mod-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> that explains the change. <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 <dfn id="attr-mod-datetime" title="attr-mod-datetime"><code>datetime</code></dfn>
  attribute may be used to specify the time and date of the change.</p>

  <p>If present, the <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code>
  attribute's value must be a <a href="common-microsyntaxes.html#valid-date-string-with-optional-time">valid date string with optional
  time</a>.</p>

  <div class="impl">

  <p>User agents must parse the <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code> attribute according to the
  <a href="common-microsyntaxes.html#parse-a-date-or-time-string">parse a date or time string</a> algorithm. If that doesn't
  return a <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> or a <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a>, then the
  modification has no associated timestamp (the value is
  non-conforming; it is not a <a href="common-microsyntaxes.html#valid-date-string-with-optional-time">valid date string with optional
  time</a>). Otherwise, the modification is marked as having been
  made at the given <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> or <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a>. If the given
  value is a <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and
  time</a> then user agents should use the associated time-zone
  offset information to determine which time zone to present the given
  datetime in.</p>

  </div>

  <p>The <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements <span class="impl">must</span> implement the <code><a href="#htmlmodelement">HTMLModElement</a></code>
  interface:</p>

  <pre class="idl">interface <dfn id="htmlmodelement">HTMLModElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-mod-cite" title="dom-mod-cite">cite</a>;
           attribute DOMString <a href="#dom-mod-datetime" title="dom-mod-datetime">dateTime</a>;
};</pre>

  <div class="impl">

  <p>The <dfn id="dom-mod-cite" title="dom-mod-cite"><code>cite</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the element's <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code> content attribute. The <dfn id="dom-mod-datetime" title="dom-mod-datetime"><code>dateTime</code></dfn> IDL attribute
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the element's <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code> content attribute.</p>

  </div>



  </body></html>
--- NEW FILE: the-video-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.6 The video element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-param-element.html" title="4.8.5 The param element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-audio-element.html" title="4.8.7 The audio 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-param-element.html">&#8592; 4.8.5 The param element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-audio-element.html">4.8.7 The audio element &#8594;</a>
  </div>

  <h4 id="the-video-element"><span class="secno">4.8.6 </span>The <dfn id="video"><code>video</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#embedded-content-2">Embedded content</a>.</dd>
   <dd>If the element has a <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attribute: <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>If the element has a <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute:
 zero or more <code><a href="the-track-element.html#the-track-element">track</a></code> elements, then
 <a href="content-models.html#transparent">transparent</a>, but with no <a href="media-elements.html#media-element">media element</a> descendants.</dd>
   <dd>If the element does not have a <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute: zero or more <code><a href="the-source-element.html#the-source-element">source</a></code> elements, then
 zero or more <code><a href="the-track-element.html#the-track-element">track</a></code> elements, then
 <a href="content-models.html#transparent">transparent</a>, but with no <a href="media-elements.html#media-element">media element</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>
   <dd><code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code></dd>
   <dd><code title="attr-media-crossorigin"><a href="media-elements.html#attr-media-crossorigin">crossorigin</a></code></dd>
   <dd><code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code></dd>
   <dd><code title="attr-media-preload"><a href="media-elements.html#attr-media-preload">preload</a></code></dd>
   <dd><code title="attr-media-autoplay"><a href="media-elements.html#attr-media-autoplay">autoplay</a></code></dd>
   <dd><code title="attr-media-mediagroup"><a href="media-elements.html#attr-media-mediagroup">mediagroup</a></code></dd>
   <dd><code title="attr-media-loop"><a href="media-elements.html#attr-media-loop">loop</a></code></dd>
   <dd><code title="attr-media-muted"><a href="media-elements.html#attr-media-muted">muted</a></code></dd>
   <dd><code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</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>
   <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="htmlvideoelement">HTMLVideoElement</dfn> : <a href="media-elements.html#htmlmediaelement">HTMLMediaElement</a> {
           attribute unsigned long <a href="dimension-attributes.html#dom-dim-width" title="dom-dim-width">width</a>;
           attribute unsigned long <a href="dimension-attributes.html#dom-dim-height" title="dom-dim-height">height</a>;
  readonly attribute unsigned long <a href="#dom-video-videowidth" title="dom-video-videoWidth">videoWidth</a>;
  readonly attribute unsigned long <a href="#dom-video-videoheight" title="dom-video-videoHeight">videoHeight</a>;
           attribute DOMString <a href="#dom-video-poster" title="dom-video-poster">poster</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>A <code><a href="#the-video-element">video</a></code> element is used for playing videos or
  movies, and audio files with captions.</p>

  <p>Content may be provided inside the <code><a href="#the-video-element">video</a></code>
  element<span class="impl">. User agents should not show this content
  to the user</span>; it is intended for older Web browsers which do
  not support <code><a href="#the-video-element">video</a></code>, so that legacy video plugins can be
  tried, or to show text to the users of these older browsers informing
  them of how to access the video contents.</p>

  <p class="note">In particular, this content is not intended to
  address accessibility concerns. To make video content accessible to
  the partially sighted, the blind, the hard-of-hearing, the deaf, and
  those with other physical or cognitive disabilities, a variety of
  features are available. Captions can be provided, either embedded in
  the video stream or as external files using the <code><a href="the-track-element.html#the-track-element">track</a></code>
  element. Sign-language tracks can be provided, again either embedded
  in the video stream or by synchronizing multiple <code><a href="#the-video-element">video</a></code>
  elements using the <code title="attr-media-mediagroup"><a href="media-elements.html#attr-media-mediagroup">mediagroup</a></code> attribute or a
  <code><a href="media-elements.html#mediacontroller">MediaController</a></code> object. Audio descriptions can be
  provided, either as a separate track embedded in the video stream,
  or a separate audio track in an <code><a href="the-audio-element.html#the-audio-element">audio</a></code> element <a href="media-elements.html#slaved-media-elements" title="slaved media elements">slaved</a> to the same controller
  as the <code><a href="#the-video-element">video</a></code> element(s), or in text form using a
<!--FORK-->
  caption file
<!--FORK-->
  referenced using the <code><a href="the-track-element.html#the-track-element">track</a></code> element and synthesized into
  speech by the user agent. WebVTT can also be used to provide chapter
  titles. For users who would rather not use a media element at all,
  transcripts or other textual alternatives can be provided by simply
  linking to them in the prose near the <code><a href="#the-video-element">video</a></code> element.
<!--FORK-->
  </p>

  <p>The <code><a href="#the-video-element">video</a></code> element is a <a href="media-elements.html#media-element">media element</a>
  whose <a href="media-elements.html#media-data">media data</a> is ostensibly video data, possibly
  with associated audio data.</p>

  <p>The <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code>, <code title="attr-media-preload"><a href="media-elements.html#attr-media-preload">preload</a></code>, <code title="attr-media-autoplay"><a href="media-elements.html#attr-media-autoplay">autoplay</a></code>, 
  <code title="attr-media-mediagroup"><a href="media-elements.html#attr-media-mediagroup">mediagroup</a></code>, 
  <code title="attr-media-loop"><a href="media-elements.html#attr-media-loop">loop</a></code>,
  <code title="attr-media-muted"><a href="media-elements.html#attr-media-muted">muted</a></code>, and <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attributes are <a href="media-elements.html#media-element-attributes" title="media element attributes">the attributes common to all media
  elements</a>.</p>

  <p>The <dfn id="attr-video-poster" title="attr-video-poster"><code>poster</code></dfn>
  attribute gives the address of an image file that the user agent can
  show while no video data is available. 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>

  <div class="impl">

  <p>If the specified resource is to be used, then, when the element
  is created or when the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code>
  attribute is set, changed, or removed, the user agent must run the
  following steps to determine the element's <dfn id="poster-frame">poster
  frame</dfn>:</p> <!-- thus it is unaffected by changes to the base
  URL. -->

  <ol><li><p>If there is an existing instance of this algorithm running
   for this <code><a href="#the-video-element">video</a></code> element, abort that instance of this
   algorithm without changing the <a href="#poster-frame">poster frame</a>.</p></li>

   <li><p>If the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code>
   attribute's value is the empty string or if the attribute is
   absent, then there is no <a href="#poster-frame">poster frame</a>; abort these
   steps.</p></li>

   <li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute's value relative
   to the element. If this fails, then there is no <a href="#poster-frame">poster
   frame</a>; abort these steps.</p></li>

   <li><p><a href="urls.html#fetch">Fetch</a> the resulting <a href="urls.html#absolute-url">absolute URL</a>,
   from the element's <code><a href="dom.html#document">Document</a></code>'s <a href="browsers.html#origin-0">origin</a>.
   This must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the element's
   document.</p></li>

   <!-- could define how to sniff for an image here -->

   <li><p>If an image is thus obtained, the <a href="#poster-frame">poster frame</a>
   is that image. Otherwise, there is no <a href="#poster-frame">poster
   frame</a>.</p></li>

  </ol></div>

  <p class="note">The image given by the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute, the <i><a href="#poster-frame">poster
  frame</a></i>, is intended to be a representative frame of the video
  (typically one of the first non-blank frames) that gives the user an
  idea of what the video is like.</p>

  <div class="impl">

  <hr><p>When no video data is available (the element's <code title="dom-media-readyState"><a href="media-elements.html#dom-media-readystate">readyState</a></code> attribute is either
  <code title="dom-media-HAVE_NOTHING"><a href="media-elements.html#dom-media-have_nothing">HAVE_NOTHING</a></code>, or <code title="dom-media-HAVE_METADATA"><a href="media-elements.html#dom-media-have_metadata">HAVE_METADATA</a></code> but no video
  data has yet been obtained at all, or the element's <code title="dom-media-readyState"><a href="media-elements.html#dom-media-readystate">readyState</a></code> attribute is any
  subsequent value but the <a href="media-elements.html#media-resource">media resource</a> does not have a
  video channel), the <code><a href="#the-video-element">video</a></code> element
  <a href="rendering.html#represents">represents</a> the <a href="#poster-frame">poster frame</a>.</p>

  <p>When a <code><a href="#the-video-element">video</a></code> element is <a href="media-elements.html#dom-media-paused" title="dom-media-paused">paused</a> and the <a href="media-elements.html#current-playback-position" title="current
  playback position">current playback position</a> is the first
  frame of video, the element <a href="rendering.html#represents">represents</a> the <a href="#poster-frame">poster
  frame</a>, unless a frame of video has already been shown, in
  which case the element <a href="rendering.html#represents">represents</a> the frame of video
  corresponding to the <a href="media-elements.html#current-playback-position" title="current playback position">current
  playback position</a>.</p>

  <p>When a <code><a href="#the-video-element">video</a></code> element is <a href="media-elements.html#dom-media-paused" title="dom-media-paused">paused</a> at any other position, and
  the <a href="media-elements.html#media-resource">media resource</a> has a video channel, the element
  <a href="rendering.html#represents">represents</a> the frame of video corresponding to the
  <a href="media-elements.html#current-playback-position" title="current playback position">current playback
  position</a>, or, if that is not yet available (e.g. because the
  video is seeking or buffering), the last frame of the video to have
  been rendered.</p>

  <p>When a <code><a href="#the-video-element">video</a></code> element whose <a href="media-elements.html#media-resource">media
  resource</a> has a video channel is <a href="media-elements.html#potentially-playing">potentially
  playing</a>, it <a href="rendering.html#represents">represents</a> the frame of video at the
  continuously increasing <a href="media-elements.html#current-playback-position" title="current playback
  position">"current" position</a>. When the <a href="media-elements.html#current-playback-position">current playback
  position</a> changes such that the last frame rendered is no
  longer the frame corresponding to the <a href="media-elements.html#current-playback-position">current playback
  position</a> in the video, the new frame must be rendered.

  Similarly, any audio associated with the <a href="media-elements.html#media-resource">media resource</a>
  must, if played, be played synchronized with the <a href="media-elements.html#current-playback-position">current
  playback position</a>, at the element's <a href="media-elements.html#effective-media-volume">effective media
  volume</a>.</p>

  <p>When a <code><a href="#the-video-element">video</a></code> element whose <a href="media-elements.html#media-resource">media
  resource</a> has a video channel is neither <a href="media-elements.html#potentially-playing">potentially
  playing</a> nor <a href="media-elements.html#dom-media-paused" title="dom-media-paused">paused</a>
  (e.g. when seeking or stalled), the element <a href="rendering.html#represents">represents</a>
  the last frame of the video to have been rendered.</p>

  <p class="note">Which frame in a video stream corresponds to a
  particular playback position is defined by the video stream's
  format.</p>

  <p>The <code><a href="#the-video-element">video</a></code> element also <a href="rendering.html#represents">represents</a> any
  <a href="media-elements.html#text-track-cue" title="text track cue">text track cues</a> whose
  <a href="media-elements.html#text-track-cue-active-flag">text track cue active flag</a> is set and whose
  <a href="media-elements.html#text-track">text track</a> is in the <a href="media-elements.html#text-track-showing" title="text track
  showing">showing</a> or <a href="media-elements.html#text-track-showing-by-default" title="text track showing by
  default">showing by default</a> modes.</p>

  <p>In addition to the above, the user agent may provide messages to
  the user (such as "buffering", "no video loaded", "error", or more
  detailed information) by overlaying text or icons on the video or
  other areas of the element's playback area, or in another
  appropriate manner.</p>

  <p>User agents that cannot render the video may instead make the
  element <a href="rendering.html#represents" title="represents">represent</a> a link to an
  external video playback utility or to the video data itself.</p>

  <p>When a <code><a href="#the-video-element">video</a></code> element's <a href="media-elements.html#media-resource">media resource</a>
  has a video channel, the element <a href="infrastructure.html#provides-a-paint-source">provides a paint
  source</a> whose width is the <a href="media-elements.html#media-resource">media resource</a>'s <a href="#concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic width</a>, whose
  height is the <a href="media-elements.html#media-resource">media resource</a>'s <a href="#concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</a>, and
  whose appearance is the frame of video corresponding to the <a href="media-elements.html#current-playback-position" title="current playback position">current playback position</a>,
  if that is available, or else (e.g. when the video is seeking or
  buffering) its previous appearance, if any, or else (e.g. because
  the video is still loading the first frame) blackness.</p>

  <hr></div>

  <dl class="domintro"><dt><var title="">video</var> . <code title="dom-video-videoWidth"><a href="#dom-video-videowidth">videoWidth</a></code></dt>
   <dt><var title="">video</var> . <code title="dom-video-videoHeight"><a href="#dom-video-videoheight">videoHeight</a></code></dt>

   <dd>

    <p>These attributes return the intrinsic dimensions of the video,
    or zero if the dimensions are not known.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic
  width</dfn> and <dfn id="concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</dfn> of the
  <a href="media-elements.html#media-resource">media resource</a> are the dimensions of the resource in
  CSS pixels after taking into account the resource's dimensions,
  aspect ratio, clean aperture, resolution, and so forth, as defined
  for the format used by the resource. If an anamorphic format does
  not define how to apply the aspect ratio to the video data's
  dimensions to obtain the "correct" dimensions, then the user agent
  must apply the ratio by increasing one dimension and leaving the
  other unchanged.</p>

  <p>The <dfn id="dom-video-videowidth" title="dom-video-videoWidth"><code>videoWidth</code></dfn> IDL
  attribute must return the <a href="#concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic width</a> of the
  video in CSS pixels. The <dfn id="dom-video-videoheight" title="dom-video-videoHeight"><code>videoHeight</code></dfn> IDL
  attribute must return the <a href="#concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</a> of
  the video in CSS pixels. If the element's <code title="dom-media-readyState"><a href="media-elements.html#dom-media-readystate">readyState</a></code> attribute is <code title="dom-media-HAVE_NOTHING"><a href="media-elements.html#dom-media-have_nothing">HAVE_NOTHING</a></code>, then the
  attributes must return 0.</p>

  </div>

  <p>The <code><a href="#the-video-element">video</a></code> element supports <a href="dimension-attributes.html#dimension-attributes">dimension
  attributes</a>.</p>

  <div class="impl">

  <p>In the absence of style rules to the contrary, video content
  should be rendered inside the element's playback area such that the
  video content is shown centered in the playback area at the largest
  possible size that fits completely within it, with the video
  content's aspect ratio being preserved. Thus, if the aspect ratio of
  the playback area does not match the aspect ratio of the video, the
  video will be shown letterboxed or pillarboxed. Areas of the
  element's playback area that do not contain the video represent
  nothing.</p>

  <p class="note">In user agents that implement CSS, the above
  requirement can be implemented by using the <a href="rendering.html#video-object-fit">style rule suggested in the rendering
  section</a>.</p>

  <p>The intrinsic width of a <code><a href="#the-video-element">video</a></code> element's playback
  area is the <a href="#concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic
  width</a> of the video resource, if that is available; otherwise
  it is the intrinsic width of the <a href="#poster-frame">poster frame</a>, if that
  is available; otherwise it is 300 CSS pixels.</p>

  <p>The intrinsic height of a <code><a href="#the-video-element">video</a></code> element's playback
  area is the <a href="#concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic
  height</a> of the video resource, if that is available; otherwise
  it is the intrinsic height of the <a href="#poster-frame">poster frame</a>, if that
  is available; otherwise it is 150 CSS pixels.</p>

  <hr><p>User agents should provide controls to enable or disable the
  display of closed captions, audio description tracks, and other
  additional data associated with the video stream, though such
  features should, again, not interfere with the page's normal
  rendering.</p>

  <p>User agents may allow users to view the video content in manners
  more suitable to the user (e.g. full-screen or in an independent
  resizable window). As for the other user interface features,
  controls to enable this should not interfere with the page's normal
  rendering unless the user agent is <a href="media-elements.html#expose-a-user-interface-to-the-user" title="expose a user
  interface to the user">exposing a user interface</a>. In such an
  independent context, however, user agents may make full user
  interfaces visible, with, e.g., play, pause, seeking, and volume
  controls, even if the <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attribute is absent.</p>

  <p>User agents may allow video playback to affect system features
  that could interfere with the user's experience; for example, user
  agents could disable screensavers while video playback is in
  progress.</p>

  <hr><p>The <dfn id="dom-video-poster" title="dom-video-poster"><code>poster</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> content attribute.</p>

  </div>

  <div class="example">

   <p>This example shows how to detect when a video has failed to play
   correctly:</p>

   <pre>&lt;script&gt;
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
&lt;/script&gt;
&lt;p&gt;&lt;video src="tgif.vid" autoplay controls onerror="failed(event)"&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="tgif.vid"&gt;Download the video file&lt;/a&gt;.&lt;/p&gt;</pre>

  </div>




  <!--CODECS

  <div class="impl">

  <h5>Video and audio codecs for <code>video</code> elements</h5>

  <p>User agents may support any video and audio codecs and container
  formats.</p>

  <p class="note">Certain user agents might support no codecs at all,
  e.g. text browsers running over SSH connections.</p>

  <!- - similar note in audio codecs section - ->
  <p class="note">Implementations are free to implement support for
  video codecs either natively, or using platform-specific APIs, or
  using plugins: this specification does not specify how codecs are to
  be implemented.</p>

  </div>

  (when replacing this text, also fix "- -" nested comments)-->





  </body></html>
--- NEW FILE: the-table-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.1 The table element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...977 lines suppressed...]
  (Unfortunately, for historical reasons, not rendering borders on
  tables is a common default.)</p>

  <p>In speech media, table cells can be distinguished by reporting
  the corresponding headers before reading the cell's contents, and by
  allowing users to navigate the table in a grid fashion, rather than
  serializing the entire contents of the table in source order.</p>

  <p>Authors are encouraged to use CSS to achieve these effects.</p>

  <div class="impl">
  <p>User agents are encouraged to render tables using these
  techniques whenever the page does not use CSS and the table is not
  classified as a layout table.</p>
  </div>




  </body></html>
--- NEW FILE: the-audio-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.7 The audio element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-video-element.html" title="4.8.6 The video element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-source-element.html" title="4.8.8 The source 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-video-element.html">&#8592; 4.8.6 The video element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-source-element.html">4.8.8 The source element &#8594;</a>
  </div>

  <h4 id="the-audio-element"><span class="secno">4.8.7 </span>The <dfn id="audio"><code>audio</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#embedded-content-2">Embedded content</a>.</dd>
   <dd>If the element has a <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attribute: <a href="content-models.html#interactive-content-0">Interactive content</a>.</dd>
   <dd>If the element has a <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attribute: <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>If the element has a <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute: 
zero or more <code><a href="the-track-element.html#the-track-element">track</a></code> elements, then 
<a href="content-models.html#transparent">transparent</a>, but with no <a href="media-elements.html#media-element">media element</a> descendants.</dd>
   <dd>If the element does not have a <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute: zero or more <code><a href="the-source-element.html#the-source-element">source</a></code> elements, then
 zero or more <code><a href="the-track-element.html#the-track-element">track</a></code> elements, then
 <a href="content-models.html#transparent">transparent</a>, but with no <a href="media-elements.html#media-element">media element</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>
   <dd><code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code></dd>
   <dd><code title="attr-media-crossorigin"><a href="media-elements.html#attr-media-crossorigin">crossorigin</a></code></dd>
   <dd><code title="attr-media-preload"><a href="media-elements.html#attr-media-preload">preload</a></code></dd>
   <dd><code title="attr-media-autoplay"><a href="media-elements.html#attr-media-autoplay">autoplay</a></code></dd>
   <dd><code title="attr-media-mediagroup"><a href="media-elements.html#attr-media-mediagroup">mediagroup</a></code></dd>
   <dd><code title="attr-media-loop"><a href="media-elements.html#attr-media-loop">loop</a></code></dd>
   <dd><code title="attr-media-muted"><a href="media-elements.html#attr-media-muted">muted</a></code></dd>
   <dd><code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</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-audio" title="dom-Audio">Audio</a>(),
 NamedConstructor=<a href="#dom-audio-s" title="dom-Audio-s">Audio</a>(DOMString src)]
interface <dfn id="htmlaudioelement">HTMLAudioElement</dfn> : <a href="media-elements.html#htmlmediaelement">HTMLMediaElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>An <code><a href="#the-audio-element">audio</a></code> element <a href="rendering.html#represents">represents</a> a sound or
  audio stream.</p>

  <!-- v2 (actually v3) suggestions:
    * Audio syntesis. Use cases from Charles Pritchard:
      > Use a sound of varying pitch to hint to a user the location of their
      > mouse (is it hovering over a button, is it x/y pixels away from the edge
      > of the screen, how close is it to the center).
      >
      > Alter the pitch of a sound to make a very cheap midi instrument.
      >
      > Pre-mix a few generated sounds, because the client processor is slow.
      >
      > Alter the pitch of an actual audio recording, and pre-mix it, to give
      > different sounding voices to pre-recorded readings of a single text. As
      > has been tried for "male" "female" sound fonts.
      >
      > Support very simple audio codecs, and programmable synthesizers.
  -->

  <p>Content may be provided inside the <code><a href="#the-audio-element">audio</a></code>
  element<span class="impl">. User agents should not show this content
  to the user</span>; it is intended for older Web browsers which do
  not support <code><a href="#the-audio-element">audio</a></code>, so that legacy audio plugins can be
  tried, or to show text to the users of these older browsers informing
  them of how to access the audio contents.</p>

  <p class="note">In particular, this content is not intended to
  address accessibility concerns. To make audio content accessible to
  the deaf or to those with other physical or cognitive disabilities,
  a variety of features are available. If captions or a sign language
  video are available, the <code><a href="the-video-element.html#the-video-element">video</a></code> element can be used
  instead of the <code><a href="#the-audio-element">audio</a></code> element to play the audio,
  allowing users to enable the visual alternatives. Chapter titles can
  be provided to aid navigation, using the <code><a href="the-track-element.html#the-track-element">track</a></code> element
  and a
<!--FORK-->
  caption file.
<!--FORK-->
  And, naturally, transcripts or other textual alternatives can be
  provided by simply linking to them in the prose near the
  <code><a href="#the-audio-element">audio</a></code> element.
<!--FORK-->
  </p>

  <p>The <code><a href="#the-audio-element">audio</a></code> element is a <a href="media-elements.html#media-element">media element</a>
  whose <a href="media-elements.html#media-data">media data</a> is ostensibly audio data.</p>

  <p>The <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code>, <code title="attr-media-preload"><a href="media-elements.html#attr-media-preload">preload</a></code>, <code title="attr-media-autoplay"><a href="media-elements.html#attr-media-autoplay">autoplay</a></code>, 
  <code title="attr-media-mediagroup"><a href="media-elements.html#attr-media-mediagroup">mediagroup</a></code>,
  <code title="attr-media-loop"><a href="media-elements.html#attr-media-loop">loop</a></code>,
  <code title="attr-media-muted"><a href="media-elements.html#attr-media-muted">muted</a></code>, and <code title="attr-media-controls"><a href="media-elements.html#attr-media-controls">controls</a></code> attributes are <a href="media-elements.html#media-element-attributes" title="media element attributes">the attributes common to all media
  elements</a>.</p>

  <div class="impl">

  <p>When an <code><a href="#the-audio-element">audio</a></code> element is <a href="media-elements.html#potentially-playing">potentially
  playing</a>, it must have its audio data played synchronized with
  the <a href="media-elements.html#current-playback-position">current playback position</a>, at the element's
  <a href="media-elements.html#effective-media-volume">effective media volume</a>.</p>

  <p>When an <code><a href="#the-audio-element">audio</a></code> element is not <a href="media-elements.html#potentially-playing">potentially
  playing</a>, audio must not play for the element.</p>

  </div>

  <dl class="domintro"><dt><var title="">audio</var> = new <code title="dom-Audio"><a href="#dom-audio">Audio</a></code>( [ <var title="">url</var> ] )</dt>

   <dd>

    <p>Returns a new <code><a href="#the-audio-element">audio</a></code> element, with the <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> attribute set to the value
    passed in the argument, if applicable.</p>

   </dd>

  </dl><div class="impl">

  <p>Two constructors are provided for creating
  <code><a href="#htmlaudioelement">HTMLAudioElement</a></code> objects (in addition to the factory
  methods from DOM Core such as <code title="">createElement()</code>): <dfn id="dom-audio" title="dom-Audio"><code>Audio()</code></dfn> and <dfn id="dom-audio-s" title="dom-Audio-s"><code>Audio(<var title="">src</var>)</code></dfn>. When invoked as constructors,
  these must return a new <code><a href="#htmlaudioelement">HTMLAudioElement</a></code> object (a new
  <code><a href="#the-audio-element">audio</a></code> element). The element must have its <code title="attr-media-preload"><a href="media-elements.html#attr-media-preload">preload</a></code> attribute set to the
  literal value "<code title="attr-media-preload-auto"><a href="media-elements.html#attr-media-preload-auto">auto</a></code>". If the <var title="">src</var> argument is present, the object created must have
  its <code title="attr-media-src"><a href="media-elements.html#attr-media-src">src</a></code> content attribute set to
  the provided value, and the user agent must invoke the object's
  <a href="media-elements.html#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection
  algorithm</a> before returning. 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>



  <!--CODECS

  <div class="impl">

  <h5>Audio codecs for <code>audio</code> elements</h5>

  <p>User agents may support any audio codecs and container
  formats.</p>

  <p>User agents must support the WAVE container format with audio
  encoded using the 16 bit PCM (LE) codec, at sampling frequencies of
  11.025kHz, 22.050kHz, and 44.100kHz, and for both mono and
  stereo. <a href="#- -refsWAVE">[WAVE]</a></p>

  <!- -
   <dt id="- -refsWAVE">WAVE</dt>
   <dd>http://en.wikipedia.org/wiki/WAV? </dd>
  - ->

  <!- - similar note in video codecs section - ->
  <p class="note">Implementations are free to implement support for
  audio codecs either natively, or using platform-specific APIs, or
  using plugins: this specification does not specify how codecs are to
  be implemented.</p>

  </div>

  (when replacing this text, also fix "- -" nested comments)-->



  </body></html>
--- NEW FILE: edits-and-lists.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.7.5 Edits and lists &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="edits-and-paragraphs.html" title="4.7.4 Edits and paragraphs" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-img-element.html" title="4.8.1 The img 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="edits-and-paragraphs.html">&#8592; 4.7.4 Edits and paragraphs</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-img-element.html">4.8.1 The img element &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="edits-and-lists.html#edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</a></li><li><a href="edits-and-lists.html#edits-and-tables"><span class="secno">4.7.6 </span>Edits and tables</a></li></ol></li><li><a href="edits-and-lists.html#embedded-content-0"><span class="secno">4.8 </span>Embedded content</a>
    </li></ol></li></ol></div>

  <h4 id="edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</h4>

  <p><i>This section is non-normative.</i></p>
  <p>The content models of the <code><a href="the-ol-element.html#the-ol-element">ol</a></code> and <code><a href="the-ul-element.html#the-ul-element">ul</a></code>
  elements do not allow <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements
  as children. Lists always represent all their items, including items
  that would otherwise have been marked as deleted.</p>

  <p>To indicate that an item is inserted or deleted, an
  <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> element can be wrapped around
  the contents of the <code><a href="the-li-element.html#the-li-element">li</a></code> element. To indicate that an
  item has been replaced by another, a single <code><a href="the-li-element.html#the-li-element">li</a></code> element
  can have one or more <code><a href="the-del-element.html#the-del-element">del</a></code> elements followed by one or
  more <code><a href="the-ins-element.html#the-ins-element">ins</a></code> elements.</p>

  <div class="example">

   <p>In the following example, a list that started empty had items
   added and removed from it over time. The bits in the example that
   have been emphasized show the parts that are the "current" state of
   the list. The list item numbers don't take into account the edits,
   though.</p>

   <pre>&lt;h1&gt;Stop-ship bugs&lt;/h1&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-12T15:20Z"&gt;<em>Bug 225:
 Rain detector doesn't work in snow</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-03-01T20:22Z"&gt;&lt;ins datetime="2008-02-14T12:02Z"&gt;Bug 228:
 Water buffer overflows in April&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-16T13:50Z"&gt;<em>Bug 230:
 Water heater doesn't use renewable fuels</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-02-20T21:15Z"&gt;&lt;ins datetime="2008-02-16T14:25Z"&gt;Bug 232:
 Carbon dioxide emissions detected after startup&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
&lt;/ol&gt;</pre>

  </div>

  <div class="example">

   <p>In the following example, a list that started with just fruit
   was replaced by a list with just colors.</p>

   <pre>&lt;h1&gt;List of &lt;del&gt;fruits&lt;/del&gt;&lt;ins&gt;colors&lt;/ins&gt;&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;del&gt;Lime&lt;/del&gt;&lt;ins&gt;Green&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Apple&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Orange&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Pear&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Teal&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Lemon&lt;/del&gt;&lt;ins&gt;Yellow&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;Olive&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Purple&lt;/ins&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

  </div>


  <h4 id="edits-and-tables"><span class="secno">4.7.6 </span>Edits and tables</h4>

  <p><i>This section is non-normative.</i></p>
  <p>The elements that form part of the table model have complicated
  content model requirements that do not allow for the
  <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements, so indicating edits
  to a table can be difficult.</p>

  <p>To indicate that an entire row or an entire column has been added
  or removed, the entire contents of each cell in that row or column
  can be wrapped in <code><a href="the-ins-element.html#the-ins-element">ins</a></code> or <code><a href="the-del-element.html#the-del-element">del</a></code> elements
  (respectively).</p>

  <div class="example">

   <p>Here, a table's row has been added:</p>

   <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; Game name           &lt;th&gt; Game publisher   &lt;th&gt; Verdict
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; Diablo 2            &lt;td&gt; Blizzard         &lt;td&gt; 8/10
  &lt;tr&gt; &lt;td&gt; Portal              &lt;td&gt; Valve            &lt;td&gt; 10/10
<strong>  &lt;tr&gt; &lt;td&gt; &lt;ins&gt;Portal 2&lt;/ins&gt; &lt;td&gt; &lt;ins&gt;Valve&lt;/ins&gt; &lt;td&gt; &lt;ins&gt;10/10&lt;/ins&gt;</strong>
&lt;/table&gt;</pre>

   <p>Here, a column has been removed (the time at which it was removed is given also, as is a link to the page explaining why):</p>

   <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; Game name           &lt;th&gt; Game publisher   &lt;th&gt; <strong>&lt;del cite="/edits/r192" datetime="2011-05-02 14:23Z"&gt;Verdict&lt;/del&gt;</strong>
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; Diablo 2            &lt;td&gt; Blizzard         &lt;td&gt; <strong>&lt;del cite="/edits/r192" datetime="2011-05-02 14:23Z"&gt;8/10&lt;/del&gt;</strong>
  &lt;tr&gt; &lt;td&gt; Portal              &lt;td&gt; Valve            &lt;td&gt; <strong>&lt;del cite="/edits/r192" datetime="2011-05-02 14:23Z"&gt;10/10&lt;/del&gt;</strong>
  &lt;tr&gt; &lt;td&gt; Portal 2            &lt;td&gt; Valve            &lt;td&gt; <strong>&lt;del cite="/edits/r192" datetime="2011-05-02 14:23Z"&gt;10/10&lt;/del&gt;</strong>
&lt;/table&gt;</pre>

  </div>

  <p>Generally speaking, there is no good way to indicate more
  complicated edits (e.g. that a cell was removed, moving all
  subsequent cells up or to the left).</p>




  <h3 id="embedded-content-0"><span class="secno">4.8 </span>Embedded content</h3>


  </body></html>
--- NEW FILE: the-pre-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.3 The pre element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-hr-element.html" title="4.5.2 The hr element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-blockquote-element.html" title="4.5.4 The blockquote 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-hr-element.html">&#8592; 4.5.2 The hr element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-blockquote-element.html">4.5.4 The blockquote element &#8594;</a>
  </div>

  <h4 id="the-pre-element"><span class="secno">4.5.3 </span>The <dfn><code>pre</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="htmlpreelement">HTMLPreElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-pre-element">pre</a></code> element <a href="rendering.html#represents">represents</a> a block of
  preformatted text, in which structure is represented by typographic
  conventions rather than by elements.</p>

  <p class="note">In <a href="syntax.html#syntax">the HTML syntax</a>, a leading
  newline character immediately following the <code><a href="#the-pre-element">pre</a></code> element
  start tag is stripped.</p>

  <p>Some examples of cases where the <code><a href="#the-pre-element">pre</a></code> element could
  be used:</p>

  <ul><li>Including an e-mail, with paragraphs indicated by blank lines,
   lists indicated by lines prefixed with a bullet, and so on.</li>

   <li>Including fragments of computer code, with structure indicated
   according to the conventions of that language.</li>

   <li>Displaying ASCII art.</li>

  </ul><p class="note">Authors are encouraged to consider how preformatted
  text will be experienced when the formatting is lost, as will be the
  case for users of speech synthesizers, braille displays, and the
  like. For cases like ASCII art, it is likely that an alternative
  presentation, such as a textual description, would be more
  universally accessible to the readers of the document.</p>

  <p>To represent a block of computer code, the <code><a href="#the-pre-element">pre</a></code>
  element can be used with a <code><a href="the-code-element.html#the-code-element">code</a></code> element; to represent a
  block of computer output the <code><a href="#the-pre-element">pre</a></code> element can be used
  with a <code><a href="the-samp-element.html#the-samp-element">samp</a></code> element. Similarly, the <code><a href="the-kbd-element.html#the-kbd-element">kbd</a></code>
  element can be used within a <code><a href="#the-pre-element">pre</a></code> element to indicate
  text that the user is to enter.</p>

  <div class="impl">

  <p>A newline in a <code><a href="#the-pre-element">pre</a></code> element should separate
  paragraphs for the purposes of the Unicode bidirectional algorithm.
  This requirement 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#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p>

  </div>

  <div class="example">

   <p>In the following snippet, a sample of computer code is
   presented.</p>

   <pre>&lt;p&gt;This is the &lt;code&gt;Panel&lt;/code&gt; constructor:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}&lt;/code&gt;&lt;/pre&gt;</pre>

  </div>

  <div class="example">

   <p>In the following snippet, <code><a href="the-samp-element.html#the-samp-element">samp</a></code> and <code><a href="the-kbd-element.html#the-kbd-element">kbd</a></code>
   elements are mixed in the contents of a <code><a href="#the-pre-element">pre</a></code> element to
   show a session of Zork I.</p>

   <pre>&lt;pre&gt;&lt;samp&gt;You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

&gt;&lt;/samp&gt; &lt;kbd&gt;open mailbox&lt;/kbd&gt;

&lt;samp&gt;Opening the mailbox reveals:
A leaflet.

&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>

  </div>

  <div class="example">

   <p>The following shows a contemporary poem that uses the
   <code><a href="#the-pre-element">pre</a></code> element to preserve its unusual formatting, which
   forms an intrinsic part of the poem itself.</p>

   <pre>&lt;pre&gt;                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07&lt;/pre&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: dynamic-markup-insertion.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.4 Dynamic markup insertion &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="interactions-with-xpath-and-xslt.html" title="3.3 Interactions with XPath and XSLT" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="semantics.html" title="4 The elements of HTML" 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="interactions-with-xpath-and-xslt.html">&#8592; 3.3 Interactions with XPath and XSLT</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="semantics.html">4 The elements of HTML &#8594;</a>
  <ol class="toc"><li><ol><li><a href="dynamic-markup-insertion.html#dynamic-markup-insertion"><span class="secno">3.4 </span>Dynamic markup insertion</a>
    <ol><li><a href="dynamic-markup-insertion.html#opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</a></li><li><a href="dynamic-markup-insertion.html#closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</a></li><li><a href="dynamic-markup-insertion.html#document.write()"><span class="secno">3.4.3 </span><code title="dom-document-write">document.write()</code></a></li><li><a href="dynamic-markup-insertion.html#document.writeln()"><span class="secno">3.4.4 </span><code title="dom-document-writeln">document.writeln()</code></a></li></ol></li></ol></li></ol></div>

  <h3 id="dynamic-markup-insertion"><span class="secno">3.4 </span><dfn>Dynamic markup insertion</dfn></h3>

  <p class="note">APIs for dynamically inserting markup into the
  document interact with the parser, and thus their behavior varies
  depending on whether they are used with <a href="infrastructure.html#html-documents">HTML documents</a>
  (and the <a href="parsing.html#html-parser">HTML parser</a>) or XHTML in <a href="infrastructure.html#xml-documents">XML
  documents</a> (and the <a href="the-xhtml-syntax.html#xml-parser">XML parser</a>).</p>



  <h4 id="opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</h4>

  <p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn>
  method comes in several variants with different numbers of
  arguments.</p>

  <dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>

   <dd>

    <p>Causes the <code><a href="dom.html#document">Document</a></code> to be replaced in-place, as if
    it was a new <code><a href="dom.html#document">Document</a></code> object, but reusing the
    previous object, which is then returned.</p>

    <p>If the <var title="">type</var> argument is omitted or has the
    value "<code><a href="iana.html#text/html">text/html</a></code>", then the resulting
    <code><a href="dom.html#document">Document</a></code> has an HTML parser associated with it, which
    can be given data to parse using <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code>. Otherwise, all
    content passed to <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> will be parsed
    as plain text.</p>

    <p>If the <var title="">replace</var> argument is present and has
    the value "<code title="">replace</code>", the existing entries in
    the session history for the <code><a href="dom.html#document">Document</a></code> object are
    removed.</p>

    <p>The method has no effect if the <code><a href="dom.html#document">Document</a></code> is still
    being parsed.</p>

    <p>Throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if the
    <code><a href="dom.html#document">Document</a></code> is an <a href="infrastructure.html#xml-documents" title="XML documents">XML
    document</a>.</p>

   </dd>

   <dt><var title="">window</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( <var title="">url</var>, <var title="">name</var>, <var title="">features</var> [, <var title="">replace</var> ] )</dt>

   <dd>

    <p>Works like the <code title="dom-open"><a href="browsers.html#dom-open">window.open()</a></code>
    method.</p>

   </dd>

  </dl><div class="impl">

  <p>When called with two or fewer arguments, the method must act as
  follows:</p>

  <ol><li>If the <code><a href="dom.html#document">Document</a></code> object is not flagged as an <a href="infrastructure.html#html-documents" title="HTML documents">HTML document</a>, throw an
   <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception and abort these
   steps.</li>

   <li><p>Let <var title="">type</var> be the value of the first
   argument, if there is one, or "<code><a href="iana.html#text/html">text/html</a></code>"
   otherwise.</p></li>

   <li><p>Let <var title="">replace</var> be true if there is a second
   argument and it is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
   the value "replace", and false otherwise.</p></li>

   <li>

    <p>If the document has an <a href="dom.html#active-parser">active parser</a> that isn't a
    <a href="#script-created-parser">script-created parser</a>, and the <a href="parsing.html#insertion-point">insertion
    point</a> associated with that parser's <a href="parsing.html#input-stream">input
    stream</a> is not undefined (that is, it <em>does</em> point to
    somewhere in the input stream), then the method does
    nothing. Abort these steps and return the <code><a href="dom.html#document">Document</a></code>
    object on which the method was invoked.</p>

    <p class="note">This basically causes <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> to be ignored
    when it's called in an inline script found during the parsing of
    data sent over the network, while still letting it have an effect
    when called asynchronously or on a document that is itself being
    spoon-fed using these APIs.</p>

   </li>

   <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

   <li><p>Set the <code><a href="dom.html#document">Document</a></code>'s <var title="concept-document-salvageable"><a href="history.html#concept-document-salvageable">salvageable</a></var> state to
   false.</p></li>

   <li><p><a href="history.html#prompt-to-unload-a-document" title="prompt to unload a document">Prompt to
   unload</a> the <code><a href="dom.html#document">Document</a></code> object. If the user
   <a href="history.html#refused-to-allow-the-document-to-be-unloaded">refused to allow the document to be unloaded</a>, then
   these steps must be aborted.</p></li>

   <li><p><a href="history.html#unload-a-document" title="unload a document">Unload</a> the
   <code><a href="dom.html#document">Document</a></code> object, with the <var title="">recycle</var>
   parameter set to true.</p></li>

   <li><p><a href="history.html#abort-a-document" title="abort a document">Abort</a> the
   <code><a href="dom.html#document">Document</a></code>.</p></li>

   <li><p>Unregister all event listeners registered on the
   <code><a href="dom.html#document">Document</a></code> node and its descendants.</p>

   </li><li><p>Remove any <a href="webappapis.html#concept-task" title="concept-task">tasks</a>
   associated with the <code><a href="dom.html#document">Document</a></code> in any <a href="webappapis.html#task-source">task
   source</a>.</p></li> <!-- removes callbacks that fired between
   this algorithm starting and the times and databases being aborted
   in the "unload" step above -->

   <li><p>Remove all child nodes of the document, without firing any
   mutation events.</p></li> <!-- as of 2009-03-30, only WebKit fired
   mutation events here. -->

   <li><p>Replace the <code><a href="dom.html#document">Document</a></code>'s singleton objects with
   new instances of those objects. (This includes in particular the
   <code><a href="browsers.html#window">Window</a></code>, <code><a href="history.html#location">Location</a></code>, <code><a href="history.html#history-1">History</a></code>,
   <code><a href="offline.html#applicationcache">ApplicationCache</a></code>, and <code><a href="system-state-and-capabilities.html#navigator">Navigator</a></code>, objects,
   the various <code><a href="browsers.html#barprop">BarProp</a></code> objects, the two
   <code>Storage</code> objects, the various
   <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> objects, and objects defined by other
   specifications, like <code>Selection</code> and the document's
   <code>UndoManager</code>. It also includes all the Web IDL
   prototypes in the JavaScript binding, including the
   <code><a href="dom.html#document">Document</a></code> object's prototype.)</p></li>

   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%20src%3D%22document%22%3E%3C%2Fiframe%3E%0A%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20f%20%3D%20document.getElementsByTagName('iframe')%5B0%5D%3B%20d%20%3D%20f.contentWindow.document%3B%20%7D%3C%2Fscript%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22w(d.documentElement.innerHTML)%22%20value%3D%22dump%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cscript%3Evar%20x%20%3D%20new%20XMLHttpRequest()%3Bx.open(%26quot%3BGET%26quot%3B%2C%20%26quot%3BGET%26quot%3B)%3Bx.onreadystatechange%3Dfunction()%20%7B%20alert(x.readyState)%3B%20%7D%3Bx.send(null)%3B%3C%2Fscript%3E')%3Bd.close()%3B%20setTimeout(function()%20%7B%20d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%20%7D%2C%200)%3B%22%20value%3D%22xhr%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.onclick%20%3D%20function()%20%7B%20w('click')%20%7D%22%20value%3D%22add%20click%20handler%22%3E%0A%3Cinput%20type%3Dbutton%20onclck%3D%22d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cp%3E%3Cscript%3Ei%20%3D%200%3B%20setTimeout(%26quot%3Bparent.w(i%2B%2B)%26quot%3B%2C%202000)%3C%2Fscript%3E%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%20with%20timer%22%3E -->
   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A...%3Ciframe%3E%3C%2Fiframe%3E%0D%0A%3Cscript%3E%0D%0Aonload%20%3D%20function%20()%20%7B%0D%0A%20frames%5B0%5D.test%20%3D%201%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20var%20a%20%3D%20frames%5B0%5D.document.location.assign%3B%0D%0A%20w(a)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%20frames%5B0%5D.document.open()%3B%0D%0A%20frames%5B0%5D.document.write('%3Cscript%3Edocument.write(test)%3C%5C%2Fscript%3E')%3B%0D%0A%20frames%5B0%5D.document.close()%3B%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E -->

   <li><p>Change the <a href="infrastructure.html#document's-character-encoding">document's character encoding</a> to
   UTF-8.</p></li>

   <li><p>Set the <code><a href="dom.html#document">Document</a></code> object's <a href="dom.html#reload-override-flag">reload override
   flag</a> and set the <code><a href="dom.html#document">Document</a></code>'s <a href="dom.html#reload-override-buffer">reload
   override buffer</a> to the empty string.</p></li>

   <li><p>Set the <code><a href="dom.html#document">Document</a></code>'s <var title="concept-document-salvageable"><a href="history.html#concept-document-salvageable">salvageable</a></var> state back
   to true.</p></li>

   <li><p>Change <a href="dom.html#the-document's-address">the document's address</a> to the
   <a href="browsers.html#entry-script">entry script</a>'s <a href="webappapis.html#script's-document" title="script's
   document">document</a>'s <a href="dom.html#the-document's-address" title="the document's
   address">address</a>.</p></li>

   <li><p>Create a new <a href="parsing.html#html-parser">HTML parser</a> and associate it with
   the document. This is a <dfn id="script-created-parser">script-created parser</dfn> (meaning
   that it can be closed by the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> and <code title="dom-document-close"><a href="#dom-document-close">document.close()</a></code> methods, and
   that the tokenizer will wait for an explicit call to <code title="dom-document-close"><a href="#dom-document-close">document.close()</a></code> before emitting
   an end-of-file token). The encoding <a href="parsing.html#concept-encoding-confidence" title="concept-encoding-confidence">confidence</a> is
   <i>irrelevant</i>.</p></li>

   <li><p>Set the <a href="dom.html#current-document-readiness">current document readiness</a> of the
   document to "<code title="">loading</code>".</p></li>

   <li>

    <!-- text/plain handling -->

    <p>If the <var title="">type</var> string contains a ";" (U+003B) character, remove the first such character and all
    characters from it up to the end of the string.</p>

    </li><li><p><a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace">Strip leading and trailing whitespace</a> from
    <var title="">type</var>.</p>

    <p>If <var title="">type</var> is <em>not</em> now an <a href="infrastructure.html#ascii-case-insensitive">ASCII
    case-insensitive</a> match for the string
    "<code><a href="iana.html#text/html">text/html</a></code>", then act as if the tokenizer had emitted
    a start tag token with the tag name "pre" followed by a single
    "LF" (U+000A) character<!-- to get eaten, so that a
    leading LF in the written text doesn't get eaten itself-->, then
    switch the <a href="parsing.html#html-parser">HTML parser</a>'s tokenizer to the
    <a href="tokenization.html#plaintext-state">PLAINTEXT state</a>.</p>

    <!--
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fsvg%2Bxml')%3B%0D%0A%20%20d.write(%22%3Cinput%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%20value%3D'(x)html'%2F%3E%22)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fgif')%3B%0D%0A%20%20var%20a%20%3D%20%5B%200x47%2C%200x49%2C%200x46%2C%200x38%2C%200x39%2C%200x61%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x80%2C%200xff%2C%200x00%2C%200xc0%2C%200xc0%2C%200xc0%2C%200x00%2C%200x00%2C%200x00%2C%200x21%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200xf9%2C%200x04%2C%200x01%2C%200x00%2C%200x00%2C%200x00%2C%200x00%2C%200x2c%2C%200x00%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x00%2C%200x00%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%200x00%2C%200x02%2C%200x02%2C%200x44%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x01%2C%200x00%2C%200x3b%20%5D%3B%0D%0A%20%20var%20s%20%3D%20%22%22%3B%0D%0A%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20a.length%3B%20i%20%2B%3D%01)%0D%0A%20%20%20%20s%20%2B%3D%20String.fromCharCode(a%5Bi%5D)%3B%0D%0A%20%20d.write(s)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27Text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27%20text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27text%2Fplain%3B%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
    -->

   </li>

   <li>

    <p>Remove all the entries in the <a href="browsers.html#browsing-context">browsing context</a>'s
    <a href="history.html#session-history">session history</a> after the <a href="history.html#current-entry">current
    entry</a>. If the <a href="history.html#current-entry">current entry</a> is the last entry
    in the session history, then no entries are removed.</p>

    <p class="note">This <a href="history.html#history-notes">doesn't necessarily
    have to affect</a> the user agent's user interface.</p>

   </li>

   <li><p>Remove any <a href="webappapis.html#concept-task" title="concept-task">tasks</a> queued by
   the <a href="webappapis.html#history-traversal-task-source">history traversal task source</a> that are associated
   with any <code><a href="dom.html#document">Document</a></code> objects in the <a href="browsers.html#top-level-browsing-context">top-level
   browsing context</a>'s <a href="browsers.html#document-family">document family</a>.</p></li>

   <li>Remove any earlier entries that share the same
   <code><a href="dom.html#document">Document</a></code>.</li>

   <li><p>If <var title="">replace</var> is false, then add a new
   entry, just before the last entry, and associate with the new entry
   the text that was parsed by the previous parser associated with the
   <code><a href="dom.html#document">Document</a></code> object, as well as the state of the document
   at the start of these steps. This allows the user to step backwards
   in the session history to see the page before it was blown away by
   the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> call.
   This new entry does not have a <code><a href="dom.html#document">Document</a></code> object, so a
   new one will be created if the session history is traversed to that
   entry.</p></li>

   <li><p>Finally, set the <a href="parsing.html#insertion-point">insertion point</a> to point at
   just before the end of the <a href="parsing.html#input-stream">input stream</a> (which at this
   point will be empty).</p></li>

   <li><p>Return the <code><a href="dom.html#document">Document</a></code> on which the method was
   invoked.</p></li>

  </ol><p class="note">The <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> method does not
  affect whether a <code><a href="dom.html#document">Document</a></code> is <a href="the-end.html#ready-for-post-load-tasks">ready for post-load
  tasks</a> or <a href="the-end.html#completely-loaded">completely loaded</a>.</p>

  <p>When called with three or more arguments, the <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method on the
  <code><a href="dom.html#document">Document</a></code> object must call the <code title="dom-open"><a href="browsers.html#dom-open">open()</a></code> method on the <code><a href="browsers.html#window">Window</a></code>
  object of the <code><a href="dom.html#document">Document</a></code> object, with the same
  arguments as the original call to the <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method, and return whatever
  that method returned. If the <code><a href="dom.html#document">Document</a></code> object has no
  <code><a href="browsers.html#window">Window</a></code> object, then the method must throw an
  <code><a href="infrastructure.html#invalidaccesserror">InvalidAccessError</a></code> exception.</p>

  </div>



  <h4 id="closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</h4>

  <dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt>

   <dd>

    <p>Closes the input stream that was opened by the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> method.</p>

    <p>Throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if the
    <code><a href="dom.html#document">Document</a></code> is an <a href="infrastructure.html#xml-documents" title="XML documents">XML
    document</a>.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-document-close" title="dom-document-close"><code>close()</code></dfn>
  method must run the following steps:</p>

  <ol><li><p>If the <code><a href="dom.html#document">Document</a></code> object is not flagged as an
   <a href="infrastructure.html#html-documents" title="HTML documents">HTML document</a>, throw an
   <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception and abort these
   steps.</p></li>

   <li><p>If there is no <a href="#script-created-parser">script-created parser</a> associated
   with the document, then abort these steps.</p></li>

   <li><p>Insert an <a href="parsing.html#explicit-eof-character">explicit "EOF" character</a> at the end
   of the parser's <a href="parsing.html#input-stream">input stream</a>.</p></li>

   <li><p>If there is a <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking script</a>,
   then abort these steps.</p></li>

   <li><p>Run the tokenizer, processing resulting tokens as they are
   emitted, and stopping when the tokenizer reaches the <a href="parsing.html#explicit-eof-character">explicit
   "EOF" character</a> or <a href="webappapis.html#spin-the-event-loop" title="spin the event loop">spins
   the event loop</a>.</p></li>

  </ol></div>



  <h4 id="document.write()"><span class="secno">3.4.3 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4>

  <dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt>

   <dd>

    <p>In general, adds the given string(s) to the
    <code><a href="dom.html#document">Document</a></code>'s input stream.</p>

    <p class="warning">This method has very idiosyncratic behavior. In
    some cases, this method can affect the state of the <a href="parsing.html#html-parser">HTML
    parser</a> while the parser is running, resulting in a DOM that
    does not correspond to the source of the document (e.g. if the
    string written is the string "<code title="">&lt;plaintext&gt;</code>" or "<code title="">&lt;!--</code>"). In other cases, the call can clear the
    current page first, as if <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> had been called.
    In yet more cases, the method is simply ignored, or throws an
    exception. To make matters worse, the exact behavior of this
    method can in some cases be dependent on network latency<!--

     Namely, in the following case:

        <script>
         document.write('<link rel=stylesheet href=foo.css><script></script>x');
         // at this point, whether the DOM contains an "x" or not depends on how quickly the foo.css file could be processed
        </script>

    -->, which can lead to failures that are very hard to debug.
    <strong>For all these reasons, use of this method is strongly
    discouraged.</strong></p>

    <p>This method throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception
    when invoked on <a href="infrastructure.html#xml-documents">XML documents</a>.</p>

   </dd>

  </dl><div class="impl">

  <p><code><a href="dom.html#document">Document</a></code> objects have an
  <dfn id="ignore-destructive-writes-counter">ignore-destructive-writes counter</dfn>, which is used in
  conjunction with the processing of <code><a href="the-script-element.html#the-script-element">script</a></code> elements to
  prevent external scripts from being able to use <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> to blow away the
  document by implicitly calling <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code>. Initially, the
  counter must be set to zero.</p>

  <p>The <dfn id="dom-document-write" title="dom-document-write"><code>document.write(...)</code></dfn>
  method must act as follows:</p>

  <ol><li>

    <p>If the method was invoked on an <a href="infrastructure.html#xml-documents" title="XML documents">XML
    document</a>, throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code>
    exception and abort these steps.</p>

    <!--
    Where would document.write() insert?
    Consider: data:text/xml,<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ document.write('<foo>Test</foo>'); ]]></script>
    -->

   </li>

   <li>

    <p>If the <a href="parsing.html#insertion-point">insertion point</a> is undefined and the
    <code><a href="dom.html#document">Document</a></code>'s <a href="#ignore-destructive-writes-counter">ignore-destructive-writes
    counter</a> is greater than zero, then abort these steps.</p>

   </li>

   <li>

    <p>If the <a href="parsing.html#insertion-point">insertion point</a> is undefined, call the
    <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method on the <code title="Document"><a href="dom.html#document">document</a></code> object (with no arguments). If
    the user <a href="history.html#refused-to-allow-the-document-to-be-unloaded">refused to allow the document to be
    unloaded</a>, then abort these steps. Otherwise, the
    <a href="parsing.html#insertion-point">insertion point</a> will point at just before the end of
    the (empty) <a href="parsing.html#input-stream">input stream</a>.</p>

   </li>

   <li>

    <p>Insert the string consisting of the concatenation of all the
    arguments to the method into the <a href="parsing.html#input-stream">input stream</a> just
    before the <a href="parsing.html#insertion-point">insertion point</a>.</p>

   </li>

   <li>

    <p>If the <code><a href="dom.html#document">Document</a></code> object's <a href="dom.html#reload-override-flag">reload override
    flag</a> is set, then append the string consisting of the
    concatenation of all the arguments to the method to the
    <code><a href="dom.html#document">Document</a></code>'s <a href="dom.html#reload-override-buffer">reload override buffer</a>.</p>

   </li>

   <li>

    <p>If there is no <a href="the-script-element.html#pending-parsing-blocking-script">pending parsing-blocking script</a>,
    have the <a href="parsing.html#html-parser">HTML parser</a> process the characters that were
    inserted, one at a time, processing resulting tokens as they are
    emitted, and stopping when the tokenizer reaches the insertion
    point or when the processing of the tokenizer is aborted by the
    tree construction stage (this can happen if a <code><a href="the-script-element.html#the-script-element">script</a></code>
    end tag token is emitted by the tokenizer).

    </p><p class="note">If the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method was
    called from script executing inline (i.e. executing because the
    parser parsed a set of <code><a href="the-script-element.html#the-script-element">script</a></code> tags), then this is a
    <a href="parsing.html#nestedParsing">reentrant invocation of the
    parser</a>.</p>

   </li>

   <li>

    <p>Finally, return from the method.</p>

   </li>

  </ol></div>


  <h4 id="document.writeln()"><span class="secno">3.4.4 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4>

  <dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt>

   <dd>

    <p>Adds the given string(s) to the <code><a href="dom.html#document">Document</a></code>'s input
    stream, followed by a newline character. If necessary, calls the
    <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly
    first.</p>

    <p>This method throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception
    when invoked on <a href="infrastructure.html#xml-documents">XML documents</a>.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-document-writeln" title="dom-document-writeln"><code>document.writeln(...)</code></dfn>
  method, when invoked, must act as if the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method had been
  invoked with the same argument(s), plus an extra argument consisting
  of a string containing a single line feed character (U+000A).</p>

  </div>



<!--TOPIC:HTML-->
  </body></html>
--- NEW FILE: the-tfoot-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.7 The tfoot element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-thead-element.html" title="4.9.6 The thead element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-tr-element.html" title="4.9.8 The tr 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-thead-element.html">&#8592; 4.9.6 The thead element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-tr-element.html">4.9.8 The tr element &#8594;</a>
  </div>

  <h4 id="the-tfoot-element"><span class="secno">4.9.7 </span>The <dfn><code>tfoot</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-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code>, <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>, and <code><a href="the-thead-element.html#the-thead-element">thead</a></code>
   elements and before any <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code> and <code><a href="the-tr-element.html#the-tr-element">tr</a></code>
   elements, but only if there are no other <code><a href="#the-tfoot-element">tfoot</a></code>
   elements that are children of the <code><a href="the-table-element.html#the-table-element">table</a></code> element.</dd>
   <dd>As a child of a <code><a href="the-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code>, <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>, <code><a href="the-thead-element.html#the-thead-element">thead</a></code>,
   <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code>, and <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements, but only if there
   are no other <code><a href="#the-tfoot-element">tfoot</a></code> elements that are children of the
   <code><a href="the-table-element.html#the-table-element">table</a></code> element.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Zero or more <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements</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><code><a href="the-tbody-element.html#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
   <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code> elements.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-tfoot-element">tfoot</a></code> element <a href="rendering.html#represents">represents</a> the <a href="attributes-common-to-td-and-th-elements.html#concept-row-group" title="concept-row-group">block</a> of <a href="attributes-common-to-td-and-th-elements.html#concept-row" title="concept-row">rows</a> that consist of the column summaries
  (footers) for the parent <code><a href="the-table-element.html#the-table-element">table</a></code> element, if the
  <code><a href="#the-tfoot-element">tfoot</a></code> element has a parent and it is a
  <code><a href="the-table-element.html#the-table-element">table</a></code>.</p>

  <div class="impl">

  <p>The <code><a href="#the-tfoot-element">tfoot</a></code> element takes part in the <a href="attributes-common-to-td-and-th-elements.html#table-model">table
  model</a>.</p>

  </div>


  </body></html>
--- NEW FILE: the-thead-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.6 The thead element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-tbody-element.html" title="4.9.5 The tbody element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-tfoot-element.html" title="4.9.7 The tfoot 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-tbody-element.html">&#8592; 4.9.5 The tbody element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-tfoot-element.html">4.9.7 The tfoot element &#8594;</a>
  </div>

  <h4 id="the-thead-element"><span class="secno">4.9.6 </span>The <dfn><code>thead</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-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code>, and <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>
   elements and before any <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code>, <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code>, and
   <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements, but only if there are no other
   <code><a href="#the-thead-element">thead</a></code> elements that are children of the
   <code><a href="the-table-element.html#the-table-element">table</a></code> element.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Zero or more <code><a href="the-tr-element.html#the-tr-element">tr</a></code> elements</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><code><a href="the-tbody-element.html#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
   <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code> elements.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-thead-element">thead</a></code> element <a href="rendering.html#represents">represents</a> the <a href="attributes-common-to-td-and-th-elements.html#concept-row-group" title="concept-row-group">block</a> of <a href="attributes-common-to-td-and-th-elements.html#concept-row" title="concept-row">rows</a> that consist of the column labels
  (headers) for the parent <code><a href="the-table-element.html#the-table-element">table</a></code> element, if the
  <code><a href="#the-thead-element">thead</a></code> element has a parent and it is a
  <code><a href="the-table-element.html#the-table-element">table</a></code>.</p>

  <div class="impl">

  <p>The <code><a href="#the-thead-element">thead</a></code> element takes part in the <a href="attributes-common-to-td-and-th-elements.html#table-model">table
  model</a>.</p>

  </div>

  <div class="example">

   <p>This example shows a <code><a href="#the-thead-element">thead</a></code> element being used.
   Notice the use of both <code><a href="the-th-element.html#the-th-element">th</a></code> and <code><a href="the-td-element.html#the-td-element">td</a></code> elements
   in the <code><a href="#the-thead-element">thead</a></code> element: the first row is the headers,
   and the second row is an explanation of how to fill in the
   table.</p>

   <pre>&lt;table&gt;
 &lt;caption&gt; School auction sign-up sheet &lt;/caption&gt;
<strong> &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;&lt;label for=e1&gt;Name&lt;/label&gt;
   &lt;th&gt;&lt;label for=e2&gt;Product&lt;/label&gt;
   &lt;th&gt;&lt;label for=e3&gt;Picture&lt;/label&gt;
   &lt;th&gt;&lt;label for=e4&gt;Price&lt;/label&gt;
  &lt;tr&gt;
   &lt;td&gt;Your name here
   &lt;td&gt;What are you selling?
   &lt;td&gt;Link to a picture
   &lt;td&gt;Your reserve price
</strong> &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Ms Danus
   &lt;td&gt;Doughnuts
   &lt;td&gt;&lt;img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus"&gt;
   &lt;td&gt;$45
  &lt;tr&gt;
   &lt;td&gt;&lt;input id=e1 type=text name=who required form=f&gt;
   &lt;td&gt;&lt;input id=e2 type=text name=what required form=f&gt;
   &lt;td&gt;&lt;input id=e3 type=url name=pic form=f&gt;
   &lt;td&gt;&lt;input id=e4 type=number step=0.01 min=0 value=0 required form=f&gt;
&lt;/table&gt;
&lt;form id=f action="/auction.cgi"&gt;
 &lt;input type=button name=add value="Submit"&gt;
&lt;/form&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: image-maps.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.14 Image maps &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-area-element.html" title="4.8.13 The area element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="mathml.html" title="4.8.15 MathML" 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-area-element.html">&#8592; 4.8.13 The area element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="mathml.html">4.8.15 MathML &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="image-maps.html#image-maps"><span class="secno">4.8.14 </span>Image maps</a>
      <ol><li><a href="image-maps.html#authoring"><span class="secno">4.8.14.1 </span>Authoring</a></li><li><a href="image-maps.html#processing-model"><span class="secno">4.8.14.2 </span>Processing model</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="image-maps"><span class="secno">4.8.14 </span>Image maps</h4>

  <!-- TESTS
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cbody%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/sample%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cmap%20name%3Da%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%200%2050%2050%27%20href%3Djavascript%3A%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3C/map%3E%0A%3Cscript%3E%0A%20var%20x%20%3D%20document.getElementsByTagName%28%27img%27%29%5B0%5D%3B%0A%20x.parentNode.appendChild%28x%29%3B%0A%20document.getElementsByTagName%28%27area%27%29%5B0%5D.focus%28%29%3B%0A%3C/script%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3Ex%3Cmap%3E%3Carea%20shape%3Dpolyg%20coords%3D%221%2C2%203%22%3E%3C/map%3E%0A%3Cscript%3Ex%20%3D%20document.getElementsByTagName%28%27area%27%29%5B0%5D%3B%20w%28x.shape%20+%20%27%20%27%20+%20x.coords%29%3C/script%3E
  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0D%0A%3Cp%3E%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/astrophy/128%22%20usemap%3D%23a%3E%0D%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%25%22%20href%3D%23%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%22%20href%3D%23%3E%3C/map%3E%0D%0A%3Cscript%3Edocument.write%28document.getElementsByTagName%28%27area%27%29%5B0%5D.coords%29%3C/script%3E
  -->

  <div class="impl">

  <h5 id="authoring"><span class="secno">4.8.14.1 </span>Authoring</h5>

  </div>

  <p>An <dfn id="image-map">image map</dfn> allows geometric areas on an image to be
  associated with <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p>

  <p>An image, in the form of an <code><a href="the-img-element.html#the-img-element">img</a></code> element or an
  <code><a href="the-object-element.html#the-object-element">object</a></code> element representing an image, may be associated
  with an image map (in the form of a <code><a href="the-map-element.html#the-map-element">map</a></code> element) by
  specifying a <dfn id="attr-hyperlink-usemap" title="attr-hyperlink-usemap"><code>usemap</code></dfn> attribute on
  the <code><a href="the-img-element.html#the-img-element">img</a></code> or <code><a href="the-object-element.html#the-object-element">object</a></code> element. The <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute, if specified,
  must be a <a href="common-microsyntaxes.html#valid-hash-name-reference">valid hash-name reference</a> to a
  <code><a href="the-map-element.html#the-map-element">map</a></code> element.</p>

  <div class="example">

   <p>Consider an image that looks as follows:</p>

   <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height="150" src="images/sample-usemap.png" width="600"></p>

   <p>If we wanted just the colored areas to be clickable, we could
   do it as follows:</p>

   <pre>&lt;p&gt;
 Please select a shape:
 &lt;img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."&gt;
 &lt;map name="shapes"&gt;
  &lt;area shape=rect coords="50,50,100,100"&gt; &lt;!-- the hole in the red box --&gt;
  &lt;area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."&gt;
  &lt;area shape=circle coords="200,75,50" href="green.html" alt="Green circle."&gt;
  &lt;area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."&gt;
  &lt;area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star."&gt;
 &lt;/map&gt;
&lt;/p&gt;</pre>

  </div>

  <div class="impl">

  <h5 id="processing-model"><span class="secno">4.8.14.2 </span>Processing model</h5>

  <p>If an <code><a href="the-img-element.html#the-img-element">img</a></code> element or an <code><a href="the-object-element.html#the-object-element">object</a></code> element
  representing an image has a <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute specified,
  user agents must process it as follows:</p>

  <ol><li><p>First, <a href="common-microsyntaxes.html#rules-for-parsing-a-hash-name-reference">rules for parsing a hash-name reference</a>
   to a <code><a href="the-map-element.html#the-map-element">map</a></code> element must be followed. This will return
   either an element (the <var title="">map</var>) or null.</p></li>

   <li><p>If that returned null, then abort these steps. The image is
   not associated with an image map after all.</p></li>

   <li><p>Otherwise, the user agent must collect all the
   <code><a href="the-area-element.html#the-area-element">area</a></code> elements that are descendants of the <var title="">map</var>. Let those be the <var title="">areas</var>.</p></li>

  </ol><p>Having obtained the list of <code><a href="the-area-element.html#the-area-element">area</a></code> elements that form
  the image map (the <var title="">areas</var>), interactive user
  agents must process the list in one of two ways.</p>

  <p>If the user agent intends to show the text that the
  <code><a href="the-img-element.html#the-img-element">img</a></code> element represents, then it must use the following
  steps.</p>

  <p class="note">In user agents that do not support images, or that
  have images disabled, <code><a href="the-object-element.html#the-object-element">object</a></code> elements cannot represent
  images, and thus this section never applies (the <a href="content-models.html#fallback-content">fallback
  content</a> is shown instead). The following steps therefore only
  apply to <code><a href="the-img-element.html#the-img-element">img</a></code> elements.</p>

  <ol><li><p>Remove all the <code><a href="the-area-element.html#the-area-element">area</a></code> elements in <var title="">areas</var> that have no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute.</p></li>

   <li><p>Remove all the <code><a href="the-area-element.html#the-area-element">area</a></code> elements in <var title="">areas</var> that have no <code title="attr-area-alt"><a href="the-area-element.html#attr-area-alt">alt</a></code> attribute, or whose <code title="attr-area-alt"><a href="the-area-element.html#attr-area-alt">alt</a></code> attribute's value is the empty
   string, <em>if</em> there is another <code><a href="the-area-element.html#the-area-element">area</a></code> element in
   <var title="">areas</var> with the same value in the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute and with a
   non-empty <code title="attr-area-alt"><a href="the-area-element.html#attr-area-alt">alt</a></code> attribute.</p></li>

   <li><p>Each remaining <code><a href="the-area-element.html#the-area-element">area</a></code> element in <var title="">areas</var> represents a <a href="links.html#hyperlink">hyperlink</a>. Those
   hyperlinks should all be made available to the user in a manner
   associated with the text of the <code><a href="the-img-element.html#the-img-element">img</a></code>.</p>

   <p>In this context, user agents may represent <code><a href="the-area-element.html#the-area-element">area</a></code> and
   <code><a href="the-img-element.html#the-img-element">img</a></code> elements with no specified <code title="">alt</code> attributes, or whose <code title="">alt</code>
   attributes are the empty string or some other non-visible text, in
   a user-agent-defined fashion intended to indicate the lack of
   suitable author-provided text.</p></li>

  </ol><p>If the user agent intends to show the image and allow interaction
  with the image to select hyperlinks, then the image must be
  associated with a set of layered shapes, taken from the
  <code><a href="the-area-element.html#the-area-element">area</a></code> elements in <var title="">areas</var>, in reverse
  tree order (so the last specified <code><a href="the-area-element.html#the-area-element">area</a></code> element in the
  <var title="">map</var> is the bottom-most shape, and the first
  element in the <var title="">map</var>, in tree order, is the
  top-most shape).</p>

  <p>Each <code><a href="the-area-element.html#the-area-element">area</a></code> element in <var title="">areas</var> must
  be processed as follows to obtain a shape to layer onto the
  image:</p>

  <ol><li><p>Find the state that the element's <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code> attribute represents.</p></li>

   <li><p>Use the <a href="common-microsyntaxes.html#rules-for-parsing-a-list-of-integers">rules for parsing a list of integers</a> to
   parse the element's <code title="attr-area-coords"><a href="the-area-element.html#attr-area-coords">coords</a></code>
   attribute, if it is present, and let the result be the <var title="">coords</var> list. If the attribute is absent, let the
   <var title="">coords</var> list be the empty list.</p></li>

   <li><p>If the number of items in the <var title="">coords</var>
   list is less than the minimum number given for the
   <code><a href="the-area-element.html#the-area-element">area</a></code> element's current state, as per the following
   table, then the shape is empty; abort these steps.</p>
    <table><thead><tr><th>State
       </th><th>Minimum number of items
     </th></tr></thead><tbody><tr><td><a href="the-area-element.html#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
       </td><td>3
      </td></tr><tr><td><a href="the-area-element.html#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
       </td><td>0
      </td></tr><tr><td><a href="the-area-element.html#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
       </td><td>6
      </td></tr><tr><td><a href="the-area-element.html#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
       </td><td>4
    </td></tr></tbody></table></li>

   <li><p>Check for excess items in the <var title="">coords</var>
   list as per the entry in the following list corresponding to the
   <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code> attribute's state:</p>
    <dl class="switch"><dt><a href="the-area-element.html#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a></dt>
     <dd>Drop any items in the list beyond the third.</dd>
     <dt><a href="the-area-element.html#attr-area-shape-default" title="attr-area-shape-default">Default state</a></dt>
     <dd>Drop all items in the list.</dd>
     <dt><a href="the-area-element.html#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a></dt>
     <dd>Drop the last item if there's an odd number of items.</dd>
     <dt><a href="the-area-element.html#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a></dt>
     <dd>Drop any items in the list beyond the fourth.</dd>
    </dl></li>

   <li><p>If the <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code> attribute
   represents the <a href="the-area-element.html#attr-area-shape-rect" title="attr-area-shape-rect">rectangle
   state</a>, and the first number in the list is numerically less
   than the third number in the list, then swap those two numbers
   around.</p></li>

   <li><p>If the <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code> attribute
   represents the <a href="the-area-element.html#attr-area-shape-rect" title="attr-area-shape-rect">rectangle
   state</a>, and the second number in the list is numerically less
   than the fourth number in the list, then swap those two numbers
   around.</p></li>

   <li><p>If the <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code> attribute
   represents the <a href="the-area-element.html#attr-area-shape-circle" title="attr-area-shape-circle">circle
   state</a>, and the third number in the list is less than or
   equal to zero, then the shape is empty; abort these steps.</p></li>

   <li><p>Now, the shape represented by the element is the one
   described for the entry in the list below corresponding to the
   state of the <code title="attr-area-shape"><a href="the-area-element.html#attr-area-shape">shape</a></code>
   attribute:</p>

    <dl class="switch"><dt><a href="the-area-element.html#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a></dt>
     <dd>
      <p>Let <var title="">x</var> be the first number in <var title="">coords</var>, <var title="">y</var> be the second
      number, and <var title="">r</var> be the third number.</p>
      <p>The shape is a circle whose center is <var title="">x</var>
      CSS pixels from the left edge of the image and <var title="">y</var> CSS pixels from the top edge of the image, and
      whose radius is <var title="">r</var> pixels.</p>
     </dd>

     <dt><a href="the-area-element.html#attr-area-shape-default" title="attr-area-shape-default">Default state</a></dt>
     <dd>
      <p>The shape is a rectangle that exactly covers the entire
      image.</p>
     </dd>

     <dt><a href="the-area-element.html#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a></dt>
     <dd>

      <p>Let <var title="">x<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>)</span>th entry in <var title="">coords</var>,
      and <var title="">y<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>+1)</span>th entry in <var title="">coords</var>
      (the first entry in <var title="">coords</var> being the one
      with index 0).</p>

      <p>Let <var title="">the coordinates</var> be (<var title="">x<sub title=""><var title="">i</var></sub></var>, <var title="">y<sub title=""><var title="">i</var></sub></var>),
      interpreted in CSS pixels measured from the top left of the
      image, for all integer values of <var title="">i</var> from 0 to
      <span title="">(<var title="">N</var>/2)-1</span>, where <var title="">N</var> is the number of items in <var title="">coords</var>.</p>

      <p>The shape is a polygon whose vertices are given by <var title="">the coordinates</var>, and whose interior is
      established using the even-odd rule. <a href="references.html#refsGRAPHICS">[GRAPHICS]</a></p>

      <!--
        browsers implement the even-odd rule / even winding rule:
        http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20usemap%3D%22%23x%22%20src%3D%22/resources/images/sample%22%3E%0A%3Cmap%20name%3D%22x%22%3E%0A%20%20%3Carea%20shape%3Dpolygon%20coords%3D%220%2C0%200%2C100%20100%2C100%20100%2C2%201%2C2%202%2C1%202%2C99%2099%2C99%2099%2C0%22%20href%3Da%3E%0A%3C/map%3E%0A
       -->

     </dd>

     <dt><a href="the-area-element.html#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a></dt>

     <dd>

      <p>Let <var title="">x<sub title="">1</sub></var> be the first
      number in <var title="">coords</var>, <var title="">y<sub title="">1</sub></var> be the second number, <var title="">x<sub title="">2</sub></var> be the third number, and <var title="">y<sub title="">2</sub></var> be the fourth number.</p>

      <p>The shape is a rectangle whose top-left corner is given by
      the coordinate (<var title="">x<sub title="">1</sub></var>, <var title="">y<sub title="">1</sub></var>) and whose bottom right
      corner is given by the coordinate (<var title="">x<sub title="">2</sub></var>, <var title="">y<sub title="">2</sub></var>), those coordinates being interpreted as
      CSS pixels from the top left corner of the image.</p>

     </dd>

    </dl><p>For historical reasons, the coordinates must be interpreted
    relative to the <em>displayed</em> image after any stretching
    caused by the CSS 'width' and 'height' properties (or, for non-CSS
    browsers, the image element's <code title="">width</code> and
    <code title="">height</code> attributes &#8212; CSS browsers map
    those attributes to the aforementioned CSS properties).</p>

    <p class="note">Browser zoom features and transforms applied using
    CSS or SVG do not affect the coordinates.</p>

   </li>

  </ol><p>Pointing device interaction with an image associated with a set
  of layered shapes per the above algorithm must result in the
  relevant user interaction events being first fired to the top-most
  shape covering the point that the pointing device indicated, if any,
  or to the image element itself, if there is no shape covering that
  point. User agents may also allow individual <code><a href="the-area-element.html#the-area-element">area</a></code>
  elements representing <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> to
  be selected and activated (e.g. using a keyboard).</p>

  <p class="note">Because a <code><a href="the-map-element.html#the-map-element">map</a></code> element (and its
  <code><a href="the-area-element.html#the-area-element">area</a></code> elements) can be associated with multiple
  <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, it is possible
  for an <code><a href="the-area-element.html#the-area-element">area</a></code> element to correspond to multiple focusable
  areas of the document.</p>

  <p>Image maps are <a href="infrastructure.html#live">live</a>; if the DOM is mutated, then the
  user agent must act as if it had rerun the algorithms for image
  maps.</p>

  </div>



  </body></html>
--- NEW FILE: the-br-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.26 The br element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-span-element.html" title="4.6.25 The span element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-wbr-element.html" title="4.6.27 The wbr 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-span-element.html">&#8592; 4.6.25 The span element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-wbr-element.html">4.6.27 The wbr element &#8594;</a>
  </div>

  <h4 id="the-br-element"><span class="secno">4.6.26 </span>The <dfn><code>br</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>
   <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>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="htmlbrelement">HTMLBRElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-br-element">br</a></code> element <a href="rendering.html#represents">represents</a> a line
  break.</p>

  <p class="note">While line breaks are usually represented in visual
  media by physically moving subsequent text to a new line, a style
  sheet or user agent would be equally justified in causing line
  breaks to be rendered in a different manner, for instance as green
  dots, or as extra spacing.</p>

  <p><code><a href="#the-br-element">br</a></code> elements must be used only for line breaks that
  are actually part of the content, as in poems or addresses.</p>

  <div class="example">

  <p>The following example is correct usage of the <code><a href="#the-br-element">br</a></code>
  element:</p>

   <pre>&lt;p&gt;P. Sherman&lt;br&gt;
42 Wallaby Way&lt;br&gt;
Sydney&lt;/p&gt;</pre>

  </div>

  <p><code><a href="#the-br-element">br</a></code> elements must not be used for separating thematic
  groups in a paragraph.</p>

  <div class="example">

   <p>The following examples are non-conforming, as they abuse the
   <code><a href="#the-br-element">br</a></code> element:</p>

   <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

   <p>Here are alternatives to the above, which are correct:</p>

   <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

  </div>

  <p>If a <a href="content-models.html#paragraph">paragraph</a> consists of nothing but a single
  <code><a href="#the-br-element">br</a></code> element, it represents a placeholder blank line
  (e.g. as in a template). Such blank lines must not be used for
  presentation purposes.</p>

  <div class="impl">

  <p>Any content inside <code><a href="#the-br-element">br</a></code> elements must not be
  considered part of the surrounding text.</p>

  <p>A <code><a href="#the-br-element">br</a></code> element should separate paragraphs for the
  purposes of the Unicode bidirectional algorithm. This requirement
  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#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p>


  </div>


  </body></html>
--- NEW FILE: the-meta-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.2.5 The meta element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1233 lines suppressed...]
  <p>In XHTML, the XML declaration should be used for inline character
  encoding information, if necessary.</p>

  <div class="example">

   <p>In HTML, to declare that the character encoding is UTF-8, the
   author could include the following markup near the top of the
   document (in the <code><a href="the-head-element.html#the-head-element">head</a></code> element):</p>

   <pre>&lt;meta charset="utf-8"&gt;</pre>

   <p>In XML, the XML declaration would be used instead, at the very
   top of the markup:</p>

   <pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-wbr-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.27 The wbr element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-br-element.html" title="4.6.26 The br element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="usage-summary.html" title="4.6.28 Usage summary" 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-br-element.html">&#8592; 4.6.26 The br element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="usage-summary.html">4.6.28 Usage summary &#8594;</a>
  </div>

  <h4 id="the-wbr-element"><span class="secno">4.6.27 </span>The <dfn><code>wbr</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>
   <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>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>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-wbr-element">wbr</a></code> element <a href="rendering.html#represents">represents</a> a line break
  opportunity.</p>

  <div class="example">

   <p>In the following example, someone is quoted as saying something
   which, for effect, is written as one long word. However, to ensure
   that the text can be wrapped in a readable fashion, the individual
   words in the quote are separated using a <code><a href="#the-wbr-element">wbr</a></code>
   element.</p>

   <pre>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>Here, especially long lines of code in a program listing have
   suggested wrapping points given using <code><a href="#the-wbr-element">wbr</a></code>
   elements.</p>

   <pre>&lt;pre&gt;...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], &lt;wbr&gt;HeadingCoordinates[2], &lt;wbr&gt;HeadingCoordinates[3], &lt;wbr&gt;HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, &lt;wbr&gt;Maps.MapFactoryFromHeading(heading), &lt;wbr&gt;Speeds.GetMaximumSpeed().ConvertToWarp());
...&lt;/pre&gt;</pre>

  </div>

  <div class="impl">

  <p>Any content inside <code><a href="#the-wbr-element">wbr</a></code> elements must not be
  considered part of the surrounding text.</p>

  </div>



  </body></html>
--- NEW FILE: introduction.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>1 Introduction &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1785 lines suppressed...]
   DOCTYPE, namespace declarations, and a specific case &#8212;
   normally lower case but occasionally camel case &#8212; for element
   and attribute names. Polyglot markup uses lower case for certain
   attribute values. Further constraints include those on empty
   elements, named entity references, and the use of scripts and
   style.</p></blockquote></dd>

<!--(the following is not included in the WHATWG spec for quality reasons)-->
<!--HPAAIG--><!--FORK-->
   <dt><cite>HTML to Platform Accessibility APIs Implementation Guide</cite> <a href="references.html#refsHPAAIG">[HPAAIG]</a></dt>

   <dd><blockquote><p>This is draft documentation mapping HTML
   elements and attributes to accessibility API Roles, States and
   Properties on a variety of platforms. It provides recommendations
   on deriving the accessible names and descriptions for HTML
   elements. It also provides accessible feature implementation
   examples.</p></blockquote></dd>
<!--HPAAIG--><!--FORK-->

  </dl></body></html>
--- NEW FILE: editing.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>7 User interaction &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1289 lines suppressed...]
   'white-space' requires adjacent regular spaces to be collapsed
   together.</p>

   <p>In the former case, "<samp>yellow&#9085;</samp>" might wrap to
   the next line ("&#9085;" being used here to represent a
   non-breaking space) even though "<samp>yellow</samp>" alone might
   fit at the end of the line; in the latter case,
   "<samp>&#9085;ball</samp>", if wrapped to the start of the line,
   would have visible indentation from the non-breaking space.</p>

   <p>When 'white-space' is set to 'pre-wrap', however, the editing
   rules will instead simply put two regular spaces between the words,
   and should the two words be split at the end of a line, the spaces
   would be neatly removed from the rendering.</p>

  </div>



  </body></html>
--- NEW FILE: common-microsyntaxes.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>2.5 Common microsyntaxes &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...3023 lines suppressed...]

  </ol></div>


  <h4 id="mq"><span class="secno">2.5.10 </span>Media queries</h4>

  <p>A string is a <dfn id="valid-media-query">valid media query</dfn> if it matches the
  <code title="">media_query_list</code> production of the Media
  Queries specification. <a href="references.html#refsMQ">[MQ]</a></p>

  <p>A string <dfn id="matches-the-environment">matches the environment</dfn> of the user if it is
  the empty string, a string consisting of only <a href="#space-character" title="space
  character">space characters</a>, or is a media query that matches
  the user's environment according to the definitions given in the
  Media Queries specification. <a href="references.html#refsMQ">[MQ]</a></p>




  </body></html>
--- NEW FILE: rendering.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>10 Rendering &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...2932 lines suppressed...]
  opportunity to <dfn id="obtain-a-physical-form">obtain a physical form</dfn> (or a
  representation of a physical form) of a <code><a href="dom.html#document">Document</a></code>. For
  example, selecting the option to print a page or convert it to PDF
  format. <a href="references.html#refsPDF">[PDF]</a></p>

  <p>When the user actually <a href="#obtain-a-physical-form" title="obtain a physical
  form">obtains a physical form</a> (or a representation of a
  physical form) of a <code><a href="dom.html#document">Document</a></code>, the user agent is
  expected to create a new rendering of the <code><a href="dom.html#document">Document</a></code> for
  the print media.</p>



  </div>



  <!--TOPIC:HTML-->

  </body></html>
--- NEW FILE: text-level-semantics.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6 Text-level semantics &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-div-element.html" title="4.5.13 The div element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-a-element.html" title="4.6.1 The a 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-div-element.html">&#8592; 4.5.13 The div element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-a-element.html">4.6.1 The a element &#8594;</a>
  </div>

  <h3 id="text-level-semantics"><span class="secno">4.6 </span>Text-level semantics</h3>

  </body></html>
--- NEW FILE: element-definitions.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.2.4 Element definitions &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="global-attributes.html" title="3.2.3 Global attributes" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="content-models.html" title="3.2.5 Content models" 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="global-attributes.html">&#8592; 3.2.3 Global attributes</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="content-models.html">3.2.5 Content models &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="element-definitions.html#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a>
      <ol><li><a href="element-definitions.html#attributes"><span class="secno">3.2.4.1 </span>Attributes</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="element-definitions"><span class="secno">3.2.4 </span>Element definitions</h4>

  <p>Each element in this specification has a definition that includes
  the following information:</p>

  <dl><dt><dfn id="element-dfn-categories" title="element-dfn-categories">Categories</dfn></dt>

   <dd><p>A list of <a href="content-models.html#content-categories" title="content categories">categories</a>
   to which the element belongs. These are used when defining the
   <a href="content-models.html#content-models">content models</a> for each element.</p></dd>


   <dt><dfn id="element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</dfn></dt>

   <dd>

    <p>A <em>non-normative</em> description of where the element can
    be used. This information is redundant with the content models of
    elements that allow this one as a child, and is provided only as a
    convenience.</p>

    <p class="note">For simplicity, only the most specific
    expectations are listed. For example, an element that is both
    <a href="content-models.html#flow-content-1">flow content</a> and <a href="content-models.html#phrasing-content-1">phrasing content</a> can be
    used anywhere that either <a href="content-models.html#flow-content-1">flow content</a> or
    <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected, but since anywhere that
    <a href="content-models.html#flow-content-1">flow content</a> is expected, <a href="content-models.html#phrasing-content-1">phrasing
    content</a> is also expected (since all <a href="content-models.html#phrasing-content-1">phrasing
    content</a> is <a href="content-models.html#flow-content-1">flow content</a>), only "where
    <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected" will be listed.</p>

   </dd>


   <dt><dfn id="element-dfn-content-model" title="element-dfn-content-model">Content model</dfn></dt>

   <dd><p>A normative description of what content must be included as
   children and descendants of the element.</p></dd>


   <dt><dfn id="element-dfn-attributes" title="element-dfn-attributes">Content attributes</dfn></dt>

   <dd><p>A normative list of attributes that may be specified on the
   element (except where otherwise disallowed).</p></dd>


   <dt><dfn id="element-dfn-dom" title="element-dfn-dom">DOM interface</dfn></dt>

   <dd><p>A normative definition of a DOM interface that such elements
   must implement.</p></dd>

  </dl><p>This is then followed by a description of what the element
  <a href="rendering.html#represents">represents</a>, along with any additional normative
  conformance criteria that may apply to authors<span class="impl" title=""> and implementations</span>. Examples are sometimes
  also included.</p>


  <h5 id="attributes"><span class="secno">3.2.4.1 </span>Attributes</h5>

  <p id="attribute-text">Except where otherwise specified, attributes
  on <a href="infrastructure.html#html-elements">HTML elements</a> may have any string value, including
  the empty string. Except where explicitly stated, there is no
  restriction on what text can be specified in such attributes.</p>



  </body></html>
--- NEW FILE: infrastructure.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>2 Common infrastructure &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1731 lines suppressed...]
   <dt>One byte in the range 80 to BF preceded by a byte that is part of a complete UTF-8 sequence that does not include this byte</dt>

   <dt>One byte in the range 80 to BF preceded by a byte that is part of a sequence that has been replaced by a U+FFFD REPLACEMENT CHARACTER, either alone or as part of a sequence</dt>

   <dd>Each such byte must be replaced with a U+FFFD REPLACEMENT CHARACTER.</dd>


  </dl><p>For the purposes of the above requirements, an <dfn id="overlong-form">overlong
  form</dfn> in UTF-8 is a sequence that encodes a code point using
  more bytes than the minimum needed to encode that code point in
  UTF-8.</p>

  <p class="example">For example, the byte string "41 98 BA 42 E2 98
  43 E2 98 BA E2 98" would be converted to the string
  "A&#65533;&#65533;B&#65533;C&#9786;&#65533;".</p>

  </div>


  </body></html>
--- NEW FILE: form-submission.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.19.6 Form submission &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="attributes-common-to-form-controls.html" title="4.10.19 Attributes common to form controls" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="textFieldSelection.html" title="4.10.20 APIs for the text field selections" 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-form-controls.html">&#8592; 4.10.19 Attributes common to form controls</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="textFieldSelection.html">4.10.20 APIs for the text field selections &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><ol><li><a href="form-submission.html#form-submission"><span class="secno">4.10.19.6 </span>Form submission</a></li><li><a href="form-submission.html#submitting-element-directionality"><span class="secno">4.10.19.7 </span>Submitting element directionality</a></li></ol></li></ol></li></ol></li></ol></div>

  <h5 id="form-submission"><span class="secno">4.10.19.6 </span>Form submission</h5>

  <p><dfn id="attributes-for-form-submission">Attributes for form submission</dfn> can be specified both
  on <code><a href="the-form-element.html#the-form-element">form</a></code> elements and on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit buttons</a> (elements that
  represent buttons that submit forms, e.g. an <code><a href="the-input-element.html#the-input-element">input</a></code>
  element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is
  in the <a href="states-of-the-type-attribute.html#submit-button-state-(type=submit)" title="attr-input-type-submit">Submit Button</a>
  state).

  </p><p>The <a href="#attributes-for-form-submission">attributes for form submission</a> that may be
  specified on <code><a href="the-form-element.html#the-form-element">form</a></code> elements are <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>.</p>

  <p>The corresponding <a href="#attributes-for-form-submission">attributes for form submission</a>
  that may be specified on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
  buttons</a> are <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>. When omitted, they
  default to the values given on the corresponding attributes on the
  <code><a href="the-form-element.html#the-form-element">form</a></code> element.</p>

  <hr><p>The <dfn id="attr-fs-action" title="attr-fs-action"><code>action</code></dfn> and
  <dfn id="attr-fs-formaction" title="attr-fs-formaction"><code>formaction</code></dfn>
  content attributes, if specified, must have a value that is a
  <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
  spaces</a>.</p>

  <p>The <dfn id="concept-fs-action" title="concept-fs-action">action</dfn> of an element is
  the value of the element's <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> attribute, if the
  element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
  button</a> and has such an attribute, or the value of its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>
  attribute, if <em>it</em> has one, or else the empty string.</p>

  <hr><p>The <dfn id="attr-fs-method" title="attr-fs-method"><code>method</code></dfn> and
  <dfn id="attr-fs-formmethod" title="attr-fs-formmethod"><code>formmethod</code></dfn>
  content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
  attributes</a> with the following keywords and states:</p>

  <ul><li>The keyword <dfn id="attr-fs-method-get-keyword" title="attr-fs-method-GET-keyword"><code>get</code></dfn>, mapping
   to the state <dfn id="attr-fs-method-get" title="attr-fs-method-GET">GET</dfn>, indicating
   the HTTP GET method.</li>

   <li>The keyword <dfn id="attr-fs-method-post-keyword" title="attr-fs-method-POST-keyword"><code>post</code></dfn>, mapping
   to the state <dfn id="attr-fs-method-post" title="attr-fs-method-POST">POST</dfn>, indicating
   the HTTP POST method.</li>

<!--FORM-DIALOG-->

  </ul><p>The <i>missing value default</i> for these attributes is the
  <a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a> state.</p>

  <p>The <dfn id="concept-fs-method" title="concept-fs-method">method</dfn> of an element is
  one of those states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> attribute, then the
  element's <a href="#concept-fs-method" title="concept-fs-method">method</a> is that
  attribute's state; otherwise, it is the <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s
  <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code> attribute's state.</p>

  <hr><p>The <dfn id="attr-fs-enctype" title="attr-fs-enctype"><code>enctype</code></dfn> and
  <dfn id="attr-fs-formenctype" title="attr-fs-formenctype"><code>formenctype</code></dfn>
  content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
  attributes</a> with the following keywords and states:</p>

  <ul><li>The "<dfn id="attr-fs-enctype-urlencoded" title="attr-fs-enctype-urlencoded"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
   <li>The "<dfn id="attr-fs-enctype-formdata" title="attr-fs-enctype-formdata"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
   <li>The "<dfn id="attr-fs-enctype-text" title="attr-fs-enctype-text"><code>text/plain</code></dfn>" keyword and corresponding state.</li>
  </ul><p>The <i>missing value default</i> for these attributes is the
  <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
  state.</p>

  <p>The <dfn id="concept-fs-enctype" title="concept-fs-enctype">enctype</dfn> of an element
  is one of those three states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> attribute, then the
  element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a> is that
  attribute's state; otherwise, it is the <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s
  <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> attribute's state.</p>

  <hr><p>The <dfn id="attr-fs-target" title="attr-fs-target"><code>target</code></dfn> and
  <dfn id="attr-fs-formtarget" title="attr-fs-formtarget"><code>formtarget</code></dfn>
  content attributes, if specified, must have values that are <a href="browsers.html#valid-browsing-context-name-or-keyword" title="valid browsing context name or keyword">valid browsing
  context names or keywords</a>.</p>

  <p>The <dfn id="concept-fs-target" title="concept-fs-target">target</dfn> of an element is
  the value of the element's <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> attribute, if the
  element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
  button</a> and has such an attribute; or the value of its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>
  attribute, if <em>it</em> has such an attribute; or, if the
  <code><a href="dom.html#document">Document</a></code> contains a <code><a href="the-base-element.html#the-base-element">base</a></code> element with a
  <code title="attr-base-target"><a href="the-base-element.html#attr-base-target">target</a></code> attribute, then the
  value of the <code title="attr-base-target"><a href="the-base-element.html#attr-base-target">target</a></code> attribute
  of the first such <code><a href="the-base-element.html#the-base-element">base</a></code> element; or, if there is no such
  element, the empty string.</p> <!-- c.f. hyperlink following -->

  <hr><p>The <dfn id="attr-fs-novalidate" title="attr-fs-novalidate"><code>novalidate</code></dfn>
  and <dfn id="attr-fs-formnovalidate" title="attr-fs-formnovalidate"><code>formnovalidate</code></dfn>
  content attributes are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean
  attributes</a>. If present, they indicate that the form is not to
  be validated during submission.</p>

  <p>The <dfn id="concept-fs-novalidate" title="concept-fs-novalidate">no-validate state</dfn> of
  an element is true if the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and the element's
  <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute
  is present, or if the element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a>'s <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> attribute is present,
  and false otherwise.</p>

  <div class="example">

   <p>This attribute is useful to include "save" buttons on forms that
   have validation constraints, to allow users to save their progress
   even though they haven't fully entered the data in the form. The
   following example shows a simple form that has two required
   fields. There are three buttons: one to submit the form, which
   requires both fields to be filled in; one to save the form so that
   the user can come back and fill it in later; and one to cancel the
   form altogether.</p>

   <pre>&lt;form action="editor.cgi" method="post"&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Essay: &lt;textarea required name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

  </div>

  <div class="impl">

  <hr><p>The <dfn id="dom-fs-action" title="dom-fs-action"><code>action</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, except that on getting, when the content attribute is
  missing or its value is the empty string, <a href="dom.html#the-document's-address">the document's
  address</a> must be returned instead. The <dfn id="dom-fs-target" title="dom-fs-target"><code>target</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-fs-method" title="dom-fs-method"><code>method</code></dfn> and <dfn id="dom-fs-enctype" title="dom-fs-enctype"><code>enctype</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-encoding" title="dom-fs-encoding"><code>encoding</code></dfn> IDL attribute
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-novalidate" title="dom-fs-noValidate"><code>noValidate</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> content attribute. The
  <dfn id="dom-fs-formaction" title="dom-fs-formAction"><code>formAction</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> content attribute,
  except that on getting, when the content attribute is missing or its
  value is the empty string, <a href="dom.html#the-document's-address">the document's address</a> must
  be returned instead. The <dfn id="dom-fs-formenctype" title="dom-fs-formEnctype"><code>formEnctype</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formmethod" title="dom-fs-formMethod"><code>formMethod</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formnovalidate" title="dom-fs-formNoValidate"><code>formNoValidate</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> content
  attribute. The <dfn id="dom-fs-formtarget" title="dom-fs-formTarget"><code>formTarget</code></dfn> IDL
  attribute must reflect the <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> content attribute.

  </p></div>


  <h5 id="submitting-element-directionality"><span class="secno">4.10.19.7 </span>Submitting element directionality</h5>

  <p>A <dfn id="form-control-dirname-attribute">form control <code title="">dirname</code> attribute</dfn>
  on a form control element enables the submission of <a href="global-attributes.html#the-directionality">the
  directionality</a> of the element, and gives the name of the
  field that contains this value during <a href="constraints.html#form-submission-0">form submission</a>.
  If such an attribute is specified, its value must not be the empty
  string.</p>


<!--TOPIC:DOM APIs-->
  </body></html>
--- NEW FILE: user-prompts.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>6.4 User prompts &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="timers.html" title="6.3 Timers" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="system-state-and-capabilities.html" title="6.5 System state and capabilities" 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="timers.html">&#8592; 6.3 Timers</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="system-state-and-capabilities.html">6.5 System state and capabilities &#8594;</a>
  <ol class="toc"><li><ol><li><a href="user-prompts.html#user-prompts"><span class="secno">6.4 </span>User prompts</a>
    <ol><li><a href="user-prompts.html#simple-dialogs"><span class="secno">6.4.1 </span>Simple dialogs</a></li><li><a href="user-prompts.html#printing"><span class="secno">6.4.2 </span>Printing</a></li><li><a href="user-prompts.html#dialogs-implemented-using-separate-documents"><span class="secno">6.4.3 </span>Dialogs implemented using separate documents</a></li></ol></li></ol></li></ol></div>

  <h3 id="user-prompts"><span class="secno">6.4 </span>User prompts</h3>

  <!--
   v2 ideas:
    * in-window modal dialogs
       - escape/enter handling
       - dragging the window out of the tab
    * in-window non-modal palettes
       - with a solution for the mobile space
  -->

  <h4 id="simple-dialogs"><span class="secno">6.4.1 </span>Simple dialogs</h4>

  <dl class="domintro"><dt><var title="">window</var> . <code title="dom-alert"><a href="#dom-alert">alert</a></code>(<var title="">message</var>)</dt>
   <dd>

    <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p>

    <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="system-state-and-capabilities.html#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

   <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-confirm"><a href="#dom-confirm">confirm</a></code>(<var title="">message</var>)</dt>
   <dd>

    <p>Displays a modal OK/Cancel prompt with the given message, waits
    for the user to dismiss it, and returns true if the user clicks OK
    and false if the user clicks Cancel.</p>

    <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="system-state-and-capabilities.html#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

   <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-prompt"><a href="#dom-prompt">prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt>
   <dd>

    <p>Displays a modal text field prompt with the given message,
    waits for the user to dismiss it, and returns the value that the
    user entered. If the user cancels the prompt, then returns null
    instead. If the second argument is present, then the given value
    is used as a default.</p>

    <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="system-state-and-capabilities.html#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-alert" title="dom-alert"><code>alert(<var title="">message</var>)</code></dfn> method, when invoked, must run
  the following steps:</p>

  <ol><li><p>If the <a href="webappapis.html#event-loop">event loop</a>'s <a href="history.html#termination-nesting-level">termination nesting
   level</a> is non-zero, optionally abort these steps.</p></li>

   <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

   <li><p>Show the given <var title="">message</var> to the
   user.</p></li>

   <li><p>Optionally, <a href="webappapis.html#pause">pause</a> while waiting for for the
   user to acknowledge the message.</p></li>

  </ol><p>The <dfn id="dom-confirm" title="dom-confirm"><code>confirm(<var title="">message</var>)</code></dfn> method, when invoked, must run
  the following steps:</p>

  <ol><li><p>If the <a href="webappapis.html#event-loop">event loop</a>'s <a href="history.html#termination-nesting-level">termination nesting
   level</a> is non-zero, optionally abort these steps, returning
   false.</p></li>

   <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

   <li><p>Show the given <var title="">message</var> to the user, and
   ask the user to respond with a positive or negative
   response.</p></li>

   <li><p><a href="webappapis.html#pause">Pause</a> until the user responds either positively
   or negatively.</p></li>

   <li><p>If the user responded positively, return true; otherwise,
   the user responded negatively: return false.</p></li>

  </ol><p>The <dfn id="dom-prompt" title="dom-prompt"><code>prompt(<var title="">message</var>, <var title="">default</var>)</code></dfn>
  method, when invoked, must run the following steps:</p>

  <ol><li><p>If the <a href="webappapis.html#event-loop">event loop</a>'s <a href="history.html#termination-nesting-level">termination nesting
   level</a> is non-zero, optionally abort these steps, returning
   null.</p></li>

   <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

   <li><p>Show the given <var title="">message</var> to the user, and
   ask the user to either respond with a string value or abort. The
   second argument is optional. If the second argument (<var title="">default</var>) is present, then the response must be
   defaulted to the value given by <var title="">default</var>.</p></li>

   <li><p><a href="webappapis.html#pause">Pause</a> while waiting for the user's
   response.</p></li>

   <li><p>If the user aborts, then return null; otherwise, return the
   string that the user responded with.</p></li>

  </ol></div>


  <h4 id="printing"><span class="secno">6.4.2 </span>Printing</h4>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">window</var> . <code title="dom-print"><a href="#dom-print">print</a></code>()</dt>

   <dd>

    <p>Prompts the user to print the page.</p>

    <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="system-state-and-capabilities.html#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class="impl">

  <p>When the <dfn id="dom-print" title="dom-print"><code>print()</code></dfn> method
  is invoked, if the <code><a href="dom.html#document">Document</a></code> is <a href="the-end.html#ready-for-post-load-tasks">ready for
  post-load tasks</a>, then the user agent must synchronously run
  the <a href="#printing-steps">printing steps</a>. Otherwise, the user agent must only
  set the <dfn id="print-when-loaded">print when loaded</dfn> flag on the
  <code><a href="dom.html#document">Document</a></code>.</p>
<!--TOPIC:HTML-->

  <p>User agents should also run the <a href="#printing-steps">printing steps</a>
  whenever the user asks for the opportunity to <a href="rendering.html#obtain-a-physical-form">obtain a
  physical form</a> (e.g. printed copy), or the representation of a
  physical form (e.g. PDF copy), of a document.</p>

  <p>The <dfn id="printing-steps">printing steps</dfn> are as follows:</p>

  <ol><li>

    <p>The user agent may display a message to the user and/or may
    abort these steps.</p>

    <p class="example">For instance, a kiosk browser could silently
    ignore any invocations of the <code title="dom-print"><a href="#dom-print">print()</a></code> method.</p>

    <p class="example">For instance, a browser on a mobile device
    could detect that there are no printers in the vicinity and
    display a message saying so before continuing to offer a "save to
    PDF" option.</p>

   </li>

   <li>

    <p>The user agent must <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named
    <code title="event-beforeprint">beforeprint</code> at the
    <code><a href="browsers.html#window">Window</a></code> object of the <code><a href="dom.html#document">Document</a></code> that is
      being printed, as well as any <a href="browsers.html#nested-browsing-context" title="nested browsing
    context">nested browsing contexts</a> in it.</p>

    <p class="example">The <code title="event-beforeprint">beforeprint</code> event can be used
    to annotate the printed copy, for instance adding the time at
    which the document was printed.</p>

   </li>

   <li>

    <p>The user agent must release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p>

   </li>

   <li>

    <p>The user agent should offer the user the opportunity to
    <a href="rendering.html#obtain-a-physical-form">obtain a physical form</a> (or the representation of a
    physical form) of the document. The user agent may wait for the
    user to either accept or decline before returning; if so, the user
    agent must <a href="webappapis.html#pause">pause</a> while the method is waiting. Even if
    the user agent doesn't wait at this point, the user agent must use
    the state of the relevant documents as they are at this point in
    the algorithm if and when it eventually creates the alternate
    form.</p>

   </li>

   <li>

    <p>The user agent must <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named
    <code title="event-afterprint">afterprint</code> at the
    <code><a href="browsers.html#window">Window</a></code> object of the <code><a href="dom.html#document">Document</a></code> that is
    being printed, as well as any <a href="browsers.html#nested-browsing-context" title="nested browsing
    context">nested browsing contexts</a> in it.</p>

    <p class="example">The <code title="event-afterprint">afterprint</code> event can be used
    to revert annotations added in the earlier event, as well as
    showing post-printing UI. For instance, if a page is walking the
    user through the steps of applying for a home loan, the script
    could automatically advance to the next step after having printed
    a form or other.</p>

   </li>

  </ol></div>


<!--TOPIC:DOM APIs-->
  <h4 id="dialogs-implemented-using-separate-documents"><span class="secno">6.4.3 </span>Dialogs implemented using separate documents</h4>

  <dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt>

   <dd>

    <p>Prompts the user with the given page, waits for that page to
    close, and returns the return value.</p>

    <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="system-state-and-capabilities.html#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
    method is implied when this method is invoked.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-showmodaldialog" title="dom-showModalDialog"><code>showModalDialog(<var title="">url</var>, <var title="">argument</var><!--, <var
  title="">features</var>-->)</code></dfn> method, when invoked, must
  cause the user agent to run the following steps:</p>

  <ol><li>

    <p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> <var title="">url</var> relative to the <a href="browsers.html#entry-script">entry script</a>'s
    <a href="webappapis.html#script's-base-url" title="script's base URL">base URL</a>.</p>

    <p>If this fails, then throw a <code><a href="infrastructure.html#syntaxerror">SyntaxError</a></code> exception
    and abort these steps.</p>

   </li>

   <li><p>If the <a href="webappapis.html#event-loop">event loop</a>'s <a href="history.html#termination-nesting-level">termination nesting
   level</a> is non-zero, optionally abort these steps, returning
   the empty string.</p></li>

   <li>

    <p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p>

   </li>

   <li>

    <p>If the user agent is configured such that this invocation of
    <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> is
    somehow disabled, then return the empty string and abort these
    steps.</p>

    <p class="note">User agents are expected to disable this method in
    certain cases to avoid user annoyance (e.g. as part of their popup
    blocker feature). For instance, a user agent could require that a
    site be white-listed before enabling this method, or the user
    agent could be configured to only allow one modal dialog at a
    time.</p>

   </li>

   <li>

    <p>If the <a href="browsers.html#active-sandboxing-flag-set">active sandboxing flag set</a>
    of the <a href="browsers.html#active-document">active document</a>
    of the <a href="webappapis.html#script's-browsing-context" title="script's browsing context">browsing context</a>
    of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that invoked the method
    has its
    <a href="browsers.html#sandboxed-auxiliary-navigation-browsing-context-flag">sandboxed auxiliary navigation browsing context flag</a>
    set, then return the empty string and abort these steps.</p>

   </li>

   <li>

    <p>Let <var title="">the list of background browsing
    contexts</var> be a list of all the browsing contexts that:</p>

    <ul><li>are part of the same <a href="browsers.html#unit-of-related-browsing-contexts">unit of related browsing
     contexts</a> as the browsing context of the
     <code><a href="browsers.html#window">Window</a></code> object on which the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method was
     called, and that</li>

     <li>have an <a href="browsers.html#active-document">active document</a> whose
     <a href="browsers.html#origin-0">origin</a> is the <a href="browsers.html#same-origin" title="same origin">same</a>
     as the <a href="browsers.html#origin-0">origin</a> of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that called the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method at
     the time the method was called,</li> <!-- Note that changing
     document.domain to talk to another domain doesn't make you able
     to block that domain -->

    </ul><p>...as well as any browsing contexts that are nested inside any
    of the browsing contexts matching those conditions.</p>

   </li>

   <li>

    <p>Disable the user interface for all the browsing contexts in
    <var title="">the list of background browsing contexts</var>. This
    should prevent the user from navigating those browsing contexts,
    causing events to be sent to those browsing context, or editing
    any content in those browsing contexts. However, it does not
    prevent those browsing contexts from receiving events from sources
    other than the user, from running scripts, from running
    animations, and so forth.</p>

   </li>

   <li>

    <p>Create a new <a href="browsers.html#auxiliary-browsing-context">auxiliary browsing context</a>, with the
    <a href="browsers.html#opener-browsing-context">opener browsing context</a> being the browsing context of
    the <code><a href="browsers.html#window">Window</a></code> object on which the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method was
    called. The new auxiliary browsing context has no name.</p>

    <p class="note">This <a href="browsers.html#browsing-context">browsing context</a>'s
    <code><a href="dom.html#document">Document</a></code>s' <code><a href="browsers.html#window">Window</a></code> objects all implement
    the <code><a href="#windowmodal">WindowModal</a></code> interface.</p>

   </li>

   <li>

    <p>Set all the flags
    in the new browsing context's <a href="browsers.html#popup-sandboxing-flag-set">popup sandboxing flag set</a>
    that are set in the
    <a href="browsers.html#active-sandboxing-flag-set">active sandboxing flag set</a>
    of the <a href="browsers.html#active-document">active document</a>
    of the <a href="webappapis.html#script's-browsing-context" title="script's browsing context">browsing context</a>
    of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that invoked the method.
    The <a href="webappapis.html#script's-browsing-context" title="script's browsing context">browsing context</a>
    of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that invoked the method
    must be set as the new browsing context's
    <a href="browsers.html#one-permitted-sandboxed-navigator">one permitted sandboxed navigator</a>.</p>

   </li>

   <li>

    <p>Let the <a href="#dialog-arguments">dialog arguments</a> of the new browsing
    context be set to the value of <var title="">argument</var>, or
    the 'undefined' value if the argument was omitted.</p>

   </li>

   <li>

    <p>Let the <a href="#dialog-arguments'-origin">dialog arguments' origin</a> be the
    <a href="browsers.html#origin-0">origin</a> of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that called the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p>

   </li>

   <li>

    <p><a href="history.html#navigate">Navigate</a><!--DONAV showModalDialog--> the new
    <a href="browsers.html#browsing-context">browsing context</a> to the <a href="urls.html#absolute-url">absolute URL</a>
    that resulted from <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a>
    <var title="">url</var> earlier, with <a href="history.html#replacement-enabled">replacement
    enabled</a>, and with the <a href="webappapis.html#script's-browsing-context" title="script's browsing
    context">browsing context</a> of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that invoked the method as
    the <a href="history.html#source-browsing-context">source browsing context</a>.</p>

   </li>

   <li>

    <p><a href="webappapis.html#spin-the-event-loop">Spin the event loop</a> until the new <a href="browsers.html#browsing-context">browsing
    context</a> is closed. (The user agent must allow the user to
    indicate that the <a href="browsers.html#browsing-context">browsing context</a> is to be
    closed.)</p>

   </li>

   <li>

    <p>Reenable the user interface for all the browsing contexts in
    <var title="">the list of background browsing contexts</var>.</p>

   </li>

   <li>

    <p>Return the <a href="browsers.html#auxiliary-browsing-context">auxiliary browsing context</a>'s
    <a href="#return-value">return value</a>.</p>

   </li>

  </ol><p>The <code><a href="browsers.html#window">Window</a></code> objects of <code><a href="dom.html#document">Document</a></code>s hosted
  by <a href="browsers.html#browsing-context" title="browsing context">browsing contexts</a> created
  by the above algorithm must also implement the
  <code><a href="#windowmodal">WindowModal</a></code> interface.</p>

  <p class="note">When this happens, the members of the
  <code><a href="#windowmodal">WindowModal</a></code> interface, in JavaScript environments,
  appear to actually be part of the <code><a href="browsers.html#window">Window</a></code> interface
  (e.g. they are on the same prototype chain as the <code title="dom-alert"><a href="#dom-alert">window.alert()</a></code> method).</p>

  </div>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="windowmodal">WindowModal</dfn> {
  readonly attribute any <a href="#dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments">dialogArguments</a>;
           attribute DOMString <a href="#dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue">returnValue</a>;
};</pre>

  <dl class="domintro"><dt><var title="">window</var> . <code title="dom-WindowModal-dialogArguments"><a href="#dom-windowmodal-dialogarguments">dialogArguments</a></code></dt>

   <dd>

    <p>Returns the <var title="">argument</var> argument that was
    passed to the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p>

   </dd>

   <dt><var title="">window</var> . <code title="dom-WindowModal-returnValue"><a href="#dom-windowmodal-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current return value for the window.</p>

    <p>Can be set, to change the value that will be returned by the
    <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code>
    method.</p>

   </dd>

  </dl><div class="impl">

  <p>Such browsing contexts have associated <dfn id="dialog-arguments">dialog
  arguments</dfn>, which are stored along with the <dfn id="dialog-arguments'-origin">dialog
  arguments' origin</dfn>. These values are set by the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method in the
  algorithm above, when the browsing context is created, based on the
  arguments provided to the method.</p>

  <p>The <dfn id="dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments"><code>dialogArguments</code></dfn>
  IDL attribute, on getting, must check whether its browsing context's
  <a href="browsers.html#active-document">active document</a>'s <a href="browsers.html#origin-0">origin</a> is the <a href="browsers.html#same-origin" title="same origin">same</a> as the <a href="#dialog-arguments'-origin">dialog arguments'
  origin</a>. If it is, then the browsing context's <a href="#dialog-arguments">dialog
  arguments</a> must be returned unchanged. Otherwise, if the
  <a href="#dialog-arguments">dialog arguments</a> are an object, then the empty string
  must be returned, and if the <a href="#dialog-arguments">dialog arguments</a> are not
  an object, then the stringification of the <a href="#dialog-arguments">dialog
  arguments</a> must be returned.

  </p><p>These browsing contexts also have an associated <dfn id="return-value">return
  value</dfn>. The <a href="#return-value">return value</a> of a browsing context
  must be initialized to the empty string when the browsing context is
  created.</p>

  <p>The <dfn id="dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue"><code>returnValue</code></dfn>
  IDL attribute, on getting, must return the <a href="#return-value">return value</a>
  of its browsing context, and on setting, must set the <a href="#return-value">return
  value</a> to the given new value.</p>

  </div>

  <p class="note">The <code title="dom-window-close"><a href="browsers.html#dom-window-close">window.close()</a></code> method can be used to
  close the browsing context.</p>
<!--TOPIC:HTML-->


<!--TOPIC:DOM APIs-->
  </body></html>
--- NEW FILE: tabular-data.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9 Tabular data &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="dimension-attributes.html" title="4.8.17 Dimension attributes" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-table-element.html" title="4.9.1 The table 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="dimension-attributes.html">&#8592; 4.8.17 Dimension attributes</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-table-element.html">4.9.1 The table element &#8594;</a>
  </div>

  <h3 id="tabular-data"><span class="secno">4.9 </span>Tabular data</h3>


  </body></html>
--- NEW FILE: the-iframe-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.2 The iframe element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-img-element.html" title="4.8.1 The img element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-embed-element.html" title="4.8.3 The embed 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-img-element.html">&#8592; 4.8.1 The img element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-embed-element.html">4.8.3 The embed element &#8594;</a>
  </div>

  <h4 id="the-iframe-element"><span class="secno">4.8.2 </span>The <dfn><code>iframe</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#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>Text that conforms to <a href="#iframe-content-model">the requirements given in the prose</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-iframe-src"><a href="#attr-iframe-src">src</a></code></dd>
   <dd><code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code></dd>
   <dd><code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code></dd>
   <dd><code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code></dd>
   <dd><code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</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>
   <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="htmliframeelement">HTMLIFrameElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-iframe-src" title="dom-iframe-src">src</a>;
           attribute DOMString <a href="#dom-iframe-srcdoc" title="dom-iframe-srcdoc">srcdoc</a>;
           attribute DOMString <a href="#dom-iframe-name" title="dom-iframe-name">name</a>;
  [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="infrastructure.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-iframe-sandbox" title="dom-iframe-sandbox">sandbox</a>;
           attribute boolean <a href="#dom-iframe-seamless" title="dom-iframe-seamless">seamless</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>;
  readonly attribute Document? <a href="#dom-iframe-contentdocument" title="dom-iframe-contentDocument">contentDocument</a>;
  readonly attribute <a href="browsers.html#windowproxy">WindowProxy</a>? <a href="#dom-iframe-contentwindow" title="dom-iframe-contentWindow">contentWindow</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-iframe-element">iframe</a></code> element <a href="rendering.html#represents">represents</a> a
  <a href="browsers.html#nested-browsing-context">nested browsing context</a>.</p>

  <p>The <dfn id="attr-iframe-src" title="attr-iframe-src"><code>src</code></dfn> attribute
  gives the address of a page that the <a href="browsers.html#nested-browsing-context">nested browsing
  context</a> is to contain. The attribute, if present, must be 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-iframe-srcdoc" title="attr-iframe-srcdoc"><code>srcdoc</code></dfn>
  attribute gives the content of the page that the <a href="browsers.html#nested-browsing-context">nested
  browsing context</a> is to contain. The value of the attribute is
  the source of <dfn id="an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</dfn>.</p>

  <p>For <code><a href="#the-iframe-element">iframe</a></code> elements in <a href="infrastructure.html#html-documents">HTML documents</a>,
  the attribute, if present, must have a value using <a href="syntax.html#syntax">the HTML
  syntax</a> that consists of the following syntactic components,
  in the given order:</p>

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

   <li>Optionally, a <a href="syntax.html#syntax-doctype" title="syntax-doctype">DOCTYPE</a>.

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

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

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

  </ol><p>For <code><a href="#the-iframe-element">iframe</a></code> elements in <a href="infrastructure.html#xml-documents">XML documents</a>,
  the attribute, if present, must have a value that matches the
  production labeled <code><a href="dom.html#document">document</a></code> in the XML
  specification. <a href="references.html#refsXML">[XML]</a></p>

  <p>If the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute and the
  <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute are both
  specified together, the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code>
  attribute takes priority. This allows authors to provide a fallback
  <a href="urls.html#url">URL</a> for legacy user agents that do not support the
  <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute.</p>

  <div class="impl">

  <p>When an <code><a href="#the-iframe-element">iframe</a></code> element is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an
  element into a document">inserted into a document</a>, the user
  agent must create a <a href="browsers.html#nested-browsing-context">nested browsing context</a>, and then
  <a href="#process-the-iframe-attributes">process the <code>iframe</code> attributes</a> for the
  first time.</p>

  <p>When an <code><a href="#the-iframe-element">iframe</a></code> element is <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an
  element from a document">removed from a document</a>, the user
  agent must <a href="browsers.html#a-browsing-context-is-discarded" title="a browsing context is
  discarded">discard</a> the <a href="browsers.html#nested-browsing-context">nested browsing
  context</a>.</p>

  <p class="note">This happens without any <code title="event-unload">unload</code> events firing (the <a href="browsers.html#nested-browsing-context">nested
  browsing context</a> and its <code><a href="dom.html#document">Document</a></code> are <em title="a browsing context is discarded"><a href="browsers.html#a-browsing-context-is-discarded">discarded</a></em>, not <em title="unload a document"><a href="history.html#unload-a-document">unloaded</a></em>).</p>

  <p>Whenever an <code><a href="#the-iframe-element">iframe</a></code> element with a <a href="browsers.html#nested-browsing-context">nested
  browsing context</a> has its <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute set, changed, or
  removed, the user agent must <a href="#process-the-iframe-attributes">process the <code>iframe</code>
  attributes</a>.</p>

  <p>Similarly, whenever an <code><a href="#the-iframe-element">iframe</a></code> element with a
  <a href="browsers.html#nested-browsing-context">nested browsing context</a> but with no <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute specified has its
  <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute set, changed, or
  removed, the user agent must <a href="#process-the-iframe-attributes">process the <code>iframe</code>
  attributes</a>.</p> <!-- It doesn't happen when the base URL is
  changed, though. -->

  <p>When the user agent is to <dfn id="process-the-iframe-attributes">process the <code>iframe</code>
  attributes</dfn>, it must run the first appropriate steps from the
  following list:</p>

  <dl class="switch"><dt>If the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute
   is specified</dt>

   <dd><p><a href="history.html#navigate">Navigate</a><!--DONAV iframe--> the element's
   <a href="browsers.html#browsing-context">browsing context</a> to a resource whose
   <a href="urls.html#content-type">Content-Type</a> is <code><a href="iana.html#text/html">text/html</a></code>, whose
   <a href="urls.html#url">URL</a> is <code><a href="urls.html#about:srcdoc">about:srcdoc</a></code>, and whose data
   consists of the value of the attribute. The resulting
   <code><a href="dom.html#document">Document</a></code> must be considered <a href="#an-iframe-srcdoc-document">an
   <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code>
   document</a>.</p></dd>

   <dt>If the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code>
   attribute is specified but the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute is not</dt>

   <dd>

    <ol><li><p>If the value of the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute is the empty string,
     jump to the <i title="">empty</i> step below.</p></li>

     <li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the value of
     the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute, relative
     to the <code><a href="#the-iframe-element">iframe</a></code> element.</p></li>

     <li><p>If that is not successful, then jump to the <i title="">empty</i> step below.</p></li>

     <li><p>If the resulting <a href="urls.html#absolute-url">absolute URL</a> is an
     <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string
     "<code><a href="urls.html#about:blank">about:blank</a></code>", and the user agent is processing this
     <code><a href="#the-iframe-element">iframe</a></code>'s attributes for the first time, then jump to
     the <i title="">empty</i> step below. (In cases other than the
     first time, <code><a href="urls.html#about:blank">about:blank</a></code> is loaded
     normally.)</p></li>

     <li><p><a href="history.html#navigate">Navigate</a><!--DONAV iframe--> the element's
     <a href="browsers.html#browsing-context">browsing context</a> to the resulting <a href="urls.html#absolute-url">absolute
     URL</a>.</p></li>

    </ol><p><i>Empty</i>: When the steps above require the user agent to
    jump to the <i title="">empty</i> step, if the user agent is
    processing this <code><a href="#the-iframe-element">iframe</a></code>'s attributes for the first
    time, then the user agent must <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-load">load</code> at the <code><a href="#the-iframe-element">iframe</a></code> element.
    (After jumping to this step, the above steps are not resumed.)
    <span class="note">No <code title="event-load">load</code> event
    is fired at the <code><a href="urls.html#about:blank">about:blank</a></code> document
    itself.</span></p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p><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-load">load</code> at the
    <code><a href="#the-iframe-element">iframe</a></code> element.</p>

   </dd>

  </dl><p>Any <a href="history.html#navigate" title="navigate">navigation</a> required of the user
  agent in the <a href="#process-the-iframe-attributes">process the <code>iframe</code> attributes</a>
  algorithm must be completed with the <code><a href="#the-iframe-element">iframe</a></code> element's
  document's <a href="browsers.html#browsing-context">browsing context</a> as the <a href="history.html#source-browsing-context">source
  browsing context</a>.</p>

  <p>Furthermore, if the <a href="browsers.html#browsing-context">browsing context</a>'s <a href="history.html#session-history">session
  history</a> contained only one <code><a href="dom.html#document">Document</a></code> when the
  <a href="#process-the-iframe-attributes">process the <code>iframe</code> attributes</a> algorithm
  was invoked, and that was the <code><a href="urls.html#about:blank">about:blank</a></code>
  <code><a href="dom.html#document">Document</a></code> created when the <a href="browsers.html#browsing-context">browsing context</a>
  was created, then any <a href="history.html#navigate" title="navigate">navigation</a>
  required of the user agent in that algorithm must be completed with
  <a href="history.html#replacement-enabled">replacement enabled</a>.</p> <!-- see also the note near
  similar text for the location.assign() method -->

  </div>

  <p class="note">If, when the element is created, the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute is not set, and
  the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute is either
  also not set or set but its value cannot be <a href="urls.html#resolve-a-url" title="resolve a
  url">resolved</a>, the browsing context will remain at the
  initial <code><a href="urls.html#about:blank">about:blank</a></code> page.</p>

  <p class="note">If the user <a href="history.html#navigate" title="navigate">navigates</a>
  away from this page, the <code><a href="#the-iframe-element">iframe</a></code>'s corresponding
  <code><a href="browsers.html#windowproxy">WindowProxy</a></code> object will proxy new <code><a href="browsers.html#window">Window</a></code>
  objects for new <code><a href="dom.html#document">Document</a></code> objects, but the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute will not change.</p>

  <div class="example">

   <p>Here a blog uses the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute in conjunction
   with the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> and <code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</a></code> attributes described
   below to provide users of user agents that support this feature
   with an extra layer of protection from script injection in the blog
   post comments:</p>

   <pre>&lt;article&gt;
 &lt;h1&gt;I got my own magazine!&lt;/h1&gt;
 &lt;p&gt;After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!&lt;/p&gt;
 &lt;footer&gt;
  &lt;p&gt;Written by &lt;a href="/users/cap"&gt;cap&lt;/a&gt;, 1 hour ago.
 &lt;/footer&gt;
 &lt;article&gt;
  &lt;footer&gt; Thirteen minutes ago, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; wrote: &lt;/footer&gt;
  &lt;iframe seamless sandbox srcdoc="&lt;p&gt;did you get a cover picture yet?"&gt;&lt;/iframe&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;footer&gt; Nine minutes ago, &lt;a href="/users/cap"&gt;cap&lt;/a&gt; wrote: &lt;/footer&gt;
  &lt;iframe seamless sandbox srcdoc="&lt;p&gt;Yeah, you can see it &lt;a href=&amp;quot;/gallery?mode=cover&amp;amp;amp;page=1&amp;quot;&gt;in my gallery&lt;/a&gt;."&gt;&lt;/iframe&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;footer&gt; Five minutes ago, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; wrote: &lt;/footer&gt;
  &lt;iframe seamless sandbox srcdoc="&lt;p&gt;hey that's earl's table.
&lt;p&gt;you should get earl&amp;amp;amp;me on the next cover."&gt;&lt;/iframe&gt;
 &lt;/article&gt;</pre>

   <p>Notice the way that quotes have to be escaped (otherwise the
   <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute would end
   prematurely), and the way raw ampersands (e.g. in URLs or in prose)
   mentioned in the sandboxed content have to be <em>doubly</em>
   escaped &#8212; once so that the ampersand is preserved when
   originally parsing the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute, and once more
   to prevent the ampersand from being misinterpreted when parsing the
   sandboxed content.</p>

  </div>

  <p class="note">In <a href="syntax.html#syntax">the HTML syntax</a>, authors need only
  remember to use """ (U+0022) characters to wrap the
  attribute contents and then to escape all """ (U+0022)
  and U+0026 AMPERSAND (&amp;) characters, and to specify the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute, to ensure safe
  embedding of content.</p>

  <p class="note">Due to restrictions of <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML
  syntax</a>, in XML the U+003C LESS-THAN SIGN character (&lt;)
  needs to be escaped as well. In order to prevent <a href="http://www.w3.org/TR/REC-xml/#AVNormalize">attribute-value
  normalization</a>, some of XML's whitespace characters &#8212;
  specifically "tab" (U+0009), "LF" (U+000A), and "CR" (U+000D) &#8212; also need to be
  escaped. <a href="references.html#refsXML">[XML]</a></p>

  <hr><p>The <dfn id="attr-iframe-name" title="attr-iframe-name"><code>name</code></dfn>
  attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name">valid browsing context
  name</a>. The given value is used to name the <a href="browsers.html#nested-browsing-context">nested
  browsing context</a>. <span class="impl">When the browsing
  context is created, if the attribute is present, the <a href="browsers.html#browsing-context-name">browsing
  context name</a> must be set to the value of this attribute;
  otherwise, the <a href="browsers.html#browsing-context-name">browsing context name</a> must be set to the
  empty string.</span></p>

  <div class="impl">

  <p>Whenever the <code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code> attribute
  is set, the nested <a href="browsers.html#browsing-context">browsing context</a>'s <a href="browsers.html#browsing-context-name" title="browsing context name">name</a> must be changed to the new
  value. If the attribute is removed, the <a href="browsers.html#browsing-context-name">browsing context
  name</a> must be set to the empty string.</p>

  <p>When content loads in an <code><a href="#the-iframe-element">iframe</a></code>, after any <code title="event-load">load</code> events are fired within the content
  itself, the user agent must <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-load">load</code> at
  the <code><a href="#the-iframe-element">iframe</a></code> element. When content whose <a href="urls.html#url">URL</a>
  has the <a href="browsers.html#same-origin">same origin</a> as the <code><a href="#the-iframe-element">iframe</a></code>
  element's <code><a href="dom.html#document">Document</a></code> fails to load (e.g. due to a DNS
  error, network error, or if the server returned a 4xx or 5xx status
  code <a href="urls.html#concept-http-equivalent-codes" title="concept-http-equivalent-codes">or
  equivalent</a>), then the user agent must <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-error">error</code> at the element instead. (This event
  does not fire for <a href="parsing.html#parse-error" title="parse error">parse errors</a>,
  script errors, or any errors for cross-origin resources.)</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation
  task source</a>.</p>

  <p class="note">A <code title="event-load">load</code> event is also
  fired at the <code><a href="#the-iframe-element">iframe</a></code> element when it is created if no
  other data is loaded in it.</p>

  <p>When there is an <a href="dom.html#active-parser">active parser</a> in the
  <code><a href="#the-iframe-element">iframe</a></code>, and when anything in the <code><a href="#the-iframe-element">iframe</a></code> is
  <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a> of
  the <code><a href="#the-iframe-element">iframe</a></code>'s <a href="browsers.html#browsing-context">browsing context</a>'s
  <a href="browsers.html#active-document">active document</a>, the <code><a href="#the-iframe-element">iframe</a></code> must
  <a href="the-end.html#delay-the-load-event">delay the load event</a> of its document.</p>

  <p class="note">If, during the handling of the <code title="event-load">load</code> event, the <a href="browsers.html#browsing-context">browsing
  context</a> in the <code><a href="#the-iframe-element">iframe</a></code> is again <a href="history.html#navigate" title="navigate">navigated</a>, that will further <a href="the-end.html#delay-the-load-event">delay the
  load event</a>.</p>

  </div>

  <hr><p>The <dfn id="attr-iframe-sandbox" title="attr-iframe-sandbox"><code>sandbox</code></dfn>
  attribute, when specified, enables a set of extra restrictions on
  any content hosted by the <code><a href="#the-iframe-element">iframe</a></code>. Its value must be an
  <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> that are
  <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>. The allowed values are
  <code title="attr-iframe-sandbox-allow-forms"><a href="browsers.html#attr-iframe-sandbox-allow-forms">allow-forms</a></code>,
  <code title="attr-iframe-sandbox-allow-popups"><a href="browsers.html#attr-iframe-sandbox-allow-popups">allow-popups</a></code>,
  <code title="attr-iframe-sandbox-allow-same-origin"><a href="browsers.html#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>,
  <code title="attr-iframe-sandbox-allow-scripts"><a href="browsers.html#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>, and
  <code title="attr-iframe-sandbox-allow-top-navigation"><a href="browsers.html#attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</a></code>.

  When the attribute is set, the content is treated as being from a
  unique <a href="browsers.html#origin-0">origin</a>, forms and scripts are disabled, links
  are prevented from targeting other <a href="browsers.html#browsing-context" title="browsing
  context">browsing contexts</a>, and plugins are secured. The
  <code title="attr-iframe-sandbox-allow-same-origin"><a href="browsers.html#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
  keyword allows the content to be treated as being from the same
  origin instead of forcing it into a unique origin, the <code title="attr-iframe-sandbox-allow-top-navigation"><a href="browsers.html#attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</a></code>
  keyword allows the content to <a href="history.html#navigate">navigate</a> its
  <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>, and the <code title="attr-iframe-sandbox-allow-forms"><a href="browsers.html#attr-iframe-sandbox-allow-forms">allow-forms</a></code>, <code title="attr-iframe-sandbox-allow-popups"><a href="browsers.html#attr-iframe-sandbox-allow-popups">allow-popups</a></code> and <code title="attr-iframe-sandbox-allow-scripts"><a href="browsers.html#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
  keywords re-enable forms, popups, and scripts respectively.</p>

  <p class="warning">Setting both the
  <code title="attr-iframe-sandbox-allow-scripts"><a href="browsers.html#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code> and
  <code title="attr-iframe-sandbox-allow-same-origin"><a href="browsers.html#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
  keywords together when the embedded page has the <a href="browsers.html#same-origin">same
  origin</a> as the page containing the <code><a href="#the-iframe-element">iframe</a></code> allows
  the embedded page to simply remove the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute.</p>

  <p class="warning">Sandboxing hostile content is of minimal help if
  an attacker can convince the user to just visit the hostile content
  directly, rather than in the <code><a href="#the-iframe-element">iframe</a></code>. To limit the
  damage that can be caused by hostile HTML content, it should be
  served from a separate dedicated domain.</p>

  <div class="impl">

  <!-- v2: Add a new attribute that enables new restrictions, e.g.:
       - disallow cross-origin loads of any kind (networking
         override that only allows same-origin URLs or about:,
         javascript:, data:)
       - block access to 'parent.frames' from sandbox
  -->

  <p>While the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code>
  attribute is set or changed, the user agent must <a href="browsers.html#parse-a-sandboxing-directive" title="parse
  a sandboxing directive">parse the sandboxing directive</a> using
  the attribute's value as the <var title="">input</var> and the
  <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#nested-browsing-context">nested browsing context</a>'s
  <a href="browsers.html#iframe-sandboxing-flag-set"><code>iframe</code> sandboxing flag set</a> as the
  output.</p>

  <p class="warning">These flags only take effect when the
  <a href="browsers.html#nested-browsing-context">nested browsing context</a> of the <code><a href="#the-iframe-element">iframe</a></code> is
  <a href="history.html#navigate" title="navigate">navigated</a>. Removing them, or removing
  the entire <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code>
  attribute, has no effect on an already-loaded page.</p>

  </div>

  <div class="example">

   <p>In this example, some completely-unknown, potentially hostile,
   user-provided HTML content is embedded in a page. Because it is
   served from a separate domain, it is affected by all the normal
   cross-site restrictions. In addition, the embedded page has
   scripting disabled, plugins disabled, forms disabled, and it cannot
   navigate any frames or windows other than itself (or any frames or
   windows it itself embeds).</p>

   <pre>&lt;p&gt;We're not scared of you! Here is your content, unedited:&lt;/p&gt;
&lt;iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"&gt;&lt;/iframe&gt;</pre>

   <p class="warning">It is important to use a separate domain so that
   if the attacker convinces the user to visit that page directly, the
   page doesn't run in the context of the site's origin, which would
   make the user vulnerable to any attack found in the page.</p>

  </div>

  <div class="example">

   <p>In this example, a gadget from another site is embedded. The
   gadget has scripting and forms enabled, and the origin sandbox
   restrictions are lifted, allowing the gadget to communicate with
   its originating server. The sandbox is still useful, however, as it
   disables plugins and popups, thus reducing the risk of the user
   being exposed to malware and other annoyances.</p>

   <pre>&lt;iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"&gt;&lt;/iframe&gt;</pre>

  </div>

  <div class="example">

   <p>Suppose a file A contained the following fragment:</p>

   <pre>&lt;iframe sandbox="allow-same-origin allow-forms" src=B&gt;&lt;/iframe&gt;</pre>

   <p>Suppose that file B contained an iframe also:</p>

   <pre>&lt;iframe sandbox="allow-scripts" src=C&gt;&lt;/iframe&gt;</pre>

   <p>Further, suppose that file C contained a link:</p>

   <pre>&lt;a href=D&gt;Link&lt;/a&gt;</pre>

   <p>For this example, suppose all the files were served as
   <code><a href="iana.html#text/html">text/html</a></code>.</p>

   <p>Page C in this scenario has all the sandboxing flags
   set. Scripts are disabled, because the <code><a href="#the-iframe-element">iframe</a></code> in A has
   scripts disabled, and this overrides the <code title="attr-iframe-sandbox-allow-scripts"><a href="browsers.html#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
   keyword set on the <code><a href="#the-iframe-element">iframe</a></code> in B. Forms are also
   disabled, because the inner <code><a href="#the-iframe-element">iframe</a></code> (in B) does not
   have the <code title="attr-iframe-sandbox-allow-forms"><a href="browsers.html#attr-iframe-sandbox-allow-forms">allow-forms</a></code> keyword
   set.</p>

   <p>Suppose now that a script in A removes all the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attributes in A
   <!--grammar-check-override--> and B. This would change nothing
   immediately. If the user clicked the link in C, loading page D into
   the <code><a href="#the-iframe-element">iframe</a></code> in B, page D would now act as if the
   <code><a href="#the-iframe-element">iframe</a></code> in B had the <code title="attr-iframe-sandbox-allow-same-origin"><a href="browsers.html#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
   and <code title="attr-iframe-sandbox-allow-forms"><a href="browsers.html#attr-iframe-sandbox-allow-forms">allow-forms</a></code> keywords
   set, because that was the state of the <a href="browsers.html#nested-browsing-context">nested browsing
   context</a> in the <code><a href="#the-iframe-element">iframe</a></code> in A when page B was
   loaded.</p>

   <p>Generally speaking, dynamically removing or changing the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute is
   ill-advised, because it can make it quite hard to reason about what
   will be allowed and what will not.</p>

  </div>

  <p class="note">Potentially hostile files should not be served from
  the same server as the file containing the <code><a href="#the-iframe-element">iframe</a></code>
  element. Using a different domain ensures that scripts in the files
  are unable to attack the site, even if the user is tricked into
  visiting those pages directly, without the protection of the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute.</p>

  <p class="warning">If the <code title="attr-iframe-sandbox-allow-scripts"><a href="browsers.html#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
  keyword is set along with <code title="attr-iframe-sandbox-allow-same-origin"><a href="browsers.html#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
  keyword, and the file is from the <a href="browsers.html#same-origin">same origin</a> as the
  <code><a href="#the-iframe-element">iframe</a></code>'s <code><a href="dom.html#document">Document</a></code>, then a script in the
  "sandboxed" iframe could just reach out, remove the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute, and then
  reload itself, effectively breaking out of the sandbox
  altogether.</p>


  <hr><!-- v2: Might be interesting to have a value on seamless that
  allowed event propagation of some sort, maybe based on the WICD
  work: http://www.w3.org/TR/WICD/ --><p>The <dfn id="attr-iframe-seamless" title="attr-iframe-seamless"><code>seamless</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, it
  indicates that the <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#browsing-context">browsing
  context</a> is to be rendered in a manner that makes it appear to
  be part of the containing document (seamlessly included in the
  parent document). <span class="impl">Specifically, when the
  attribute is set on an <code><a href="#the-iframe-element">iframe</a></code> element whose owner
  <code><a href="dom.html#document">Document</a></code>'s <a href="browsers.html#active-sandboxing-flag-set">active sandboxing flag set</a> does
  not have the <a href="browsers.html#sandboxed-seamless-iframes-flag">sandboxed seamless iframes flag</a> set, and
  while either the <a href="browsers.html#browsing-context">browsing context</a>'s <a href="browsers.html#active-document">active
  document</a> has the <a href="browsers.html#same-origin">same origin</a> as the
  <code><a href="#the-iframe-element">iframe</a></code> element's document, or the <a href="browsers.html#browsing-context">browsing
  context</a>'s <a href="browsers.html#active-document">active document</a>'s <em><a href="the-address-element.html#the-address-element"><span title="the
  document's address">address</span></a></em> has the <a href="browsers.html#same-origin">same
  origin</a> as the <code><a href="#the-iframe-element">iframe</a></code> element's document, or the
  <a href="browsers.html#browsing-context">browsing context</a>'s <a href="browsers.html#active-document">active document</a> is
  <a href="#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, the
  following requirements apply:</span></p>

  <div class="impl">

  <ul><li><p>The user agent must set the <dfn id="seamless-browsing-context-flag">seamless browsing context
   flag</dfn> to true for that <a href="browsers.html#browsing-context">browsing context</a>. This
   will <a href="history.html#seamlessLinks">cause links to open in the parent
   browsing context</a> unless an <a href="browsers.html#explicit-self-navigation-override">explicit self-navigation
   override</a> is used (<code title="">target="_self"</code>).</p></li>

   <li><p>In a CSS-supporting user agent: the user agent must add all
   the style sheets that apply to the <code><a href="#the-iframe-element">iframe</a></code> element to
   the cascade of the <a href="browsers.html#active-document">active document</a> of the
   <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#nested-browsing-context">nested browsing context</a>,
   at the appropriate cascade levels, before any style sheets
   specified by the document itself.</p></li>

   <li><p>In a CSS-supporting user agent: the user agent must, for the
   purpose of CSS property inheritance only, treat the root element of
   the <a href="browsers.html#active-document">active document</a> of the <code><a href="#the-iframe-element">iframe</a></code>
   element's <a href="browsers.html#nested-browsing-context">nested browsing context</a> as being a child of
   the <code><a href="#the-iframe-element">iframe</a></code> element. (Thus inherited properties on the
   root element of the document in the <code><a href="#the-iframe-element">iframe</a></code> will
   inherit the computed values of those properties on the
   <code><a href="#the-iframe-element">iframe</a></code> element instead of taking their initial
   values.)</p></li>

   <li><p>In visual media, in a CSS-supporting user agent: the user agent
   should set the intrinsic width of the <code><a href="#the-iframe-element">iframe</a></code> to the
   width that the element would have if it was a non-replaced
   block-level element with 'width: auto'.</p></li>

   <li><p>In visual media, in a CSS-supporting user agent: the user
   agent should set the intrinsic height of the <code><a href="#the-iframe-element">iframe</a></code> to
   the height of the bounding box around the content rendered in the
   <code><a href="#the-iframe-element">iframe</a></code> at its current width (as given in the previous
   bullet point), as it would be if the scrolling position was such
   that the top of the viewport for the content rendered in the
   <code><a href="#the-iframe-element">iframe</a></code> was aligned with the origin of that content's
   canvas.</p></li>

   <li>

    <p>In visual media, in a CSS-supporting user agent: the user agent
    must force the height of the initial containing block of the
    <a href="browsers.html#active-document">active document</a> of the <a href="browsers.html#nested-browsing-context">nested browsing
    context</a> of the <code><a href="#the-iframe-element">iframe</a></code> to zero.</p>

    <p class="note">This is intended to get around the otherwise
    circular dependency of percentage dimensions that depend on the
    height of the containing block, thus affecting the height of the
    document's bounding box, thus affecting the height of the
    viewport, thus affecting the size of the initial containing
    block.</p>

   </li>

   <li><p>In speech media, the user agent should render the <a href="browsers.html#nested-browsing-context">nested
   browsing context</a> without announcing that it is a separate
   document.</p></li>

   <li>

    <p>User agents should, in general, act as if the <a href="browsers.html#active-document">active
    document</a> of the <code><a href="#the-iframe-element">iframe</a></code>'s <a href="browsers.html#nested-browsing-context">nested browsing
    context</a> was part of the document that the
    <code><a href="#the-iframe-element">iframe</a></code> is in, if any.</p>

    <p class="example">For example if the user agent supports listing
    all the links in a document, links in "seamlessly" nested
    documents would be included in that list without being
    significantly distinguished from links in the document itself.</p>

   </li>

  </ul><p>If the attribute is not specified, or if the <a href="browsers.html#origin-0">origin</a>
  conditions listed above are not met, then the user agent should
  render the <a href="browsers.html#nested-browsing-context">nested browsing context</a> in a manner that is
  clearly distinguishable as a separate <a href="browsers.html#browsing-context">browsing context</a>,
  and the <a href="#seamless-browsing-context-flag">seamless browsing context flag</a> must be set to
  false for that <a href="browsers.html#browsing-context">browsing context</a>.</p>

  <p class="warning">It is important that user agents recheck the
  above conditions whenever the <a href="browsers.html#active-document">active document</a> of the
  <a href="browsers.html#nested-browsing-context">nested browsing context</a> of the <code><a href="#the-iframe-element">iframe</a></code>
  changes, such that the <a href="#seamless-browsing-context-flag">seamless browsing context flag</a>
  gets unset if the <a href="browsers.html#nested-browsing-context">nested browsing context</a> is <a href="history.html#navigate" title="navigate">navigated</a> to another origin.</p>

  </div>

  <p class="note">The attribute can be set or removed dynamically,
  with the rendering updating in tandem.</p>

  <div class="example">

   <p>In this example, the site's navigation is embedded using a
   client-side include using an <code><a href="#the-iframe-element">iframe</a></code>. Any links in the
   <code><a href="#the-iframe-element">iframe</a></code> will, in new user agents, be automatically
   opened in the <code><a href="#the-iframe-element">iframe</a></code>'s parent browsing context; for
   legacy user agents, the site could also include a <code><a href="the-base-element.html#the-base-element">base</a></code>
   element with a <code title="attr-base-target"><a href="the-base-element.html#attr-base-target">target</a></code>
   attribute with the value <code title="">_parent</code>. Similarly,
   in new user agents the styles of the parent page will be
   automatically applied to the contents of the frame, but to support
   legacy user agents authors might wish to include the styles
   explicitly.</p>

   <pre>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</pre>

  </div>


  <hr><p>The <code><a href="#the-iframe-element">iframe</a></code> element supports <a href="dimension-attributes.html#dimension-attributes">dimension
  attributes</a> for cases where the embedded content has specific
  dimensions (e.g. ad units have well-defined dimensions).</p>

  <p>An <code><a href="#the-iframe-element">iframe</a></code> element never has <a href="content-models.html#fallback-content">fallback
  content</a>, as it will always create a nested <a href="browsers.html#browsing-context">browsing
  context</a>, regardless of whether the specified initial contents
  are successfully used.</p>

  <p>Descendants of <code><a href="#the-iframe-element">iframe</a></code> elements represent
  nothing. (In legacy user agents that do not support
  <code><a href="#the-iframe-element">iframe</a></code> elements, the contents would be parsed as markup
  that could act as fallback content.)</p>

  <p id="iframe-content-model">When used in <a href="infrastructure.html#html-documents">HTML
  documents</a>, the allowed content model of <code><a href="#the-iframe-element">iframe</a></code>
  elements is text, except that invoking the <a href="the-end.html#html-fragment-parsing-algorithm">HTML fragment
  parsing algorithm</a> with the <code><a href="#the-iframe-element">iframe</a></code> element as the
  <var title="concept-frag-parse-context"><a href="the-end.html#concept-frag-parse-context">context</a></var> element and
  the text contents as the <var title="">input</var> must result in a
  list of nodes that are all <a href="content-models.html#phrasing-content-1">phrasing content</a>, with no
  <a href="parsing.html#parse-error" title="parse error">parse errors</a> having occurred, with
  no <code><a href="the-script-element.html#the-script-element">script</a></code> elements being anywhere in the list or as
  descendants of elements in the list, and with all the elements in
  the list (including their descendants) being themselves
  conforming.</p>

  <p>The <code><a href="#the-iframe-element">iframe</a></code> element must be empty in <a href="infrastructure.html#xml-documents">XML
  documents</a>.</p>

  <p class="note">The <a href="parsing.html#html-parser">HTML parser</a> treats markup inside
  <code><a href="#the-iframe-element">iframe</a></code> elements as text.</p>

  <div class="impl">

  <p>The IDL attributes <dfn id="dom-iframe-src" title="dom-iframe-src"><code>src</code></dfn>, <dfn id="dom-iframe-srcdoc" title="dom-iframe-srcdoc"><code>srcdoc</code></dfn>, <dfn id="dom-iframe-name" title="dom-iframe-name"><code>name</code></dfn>, <dfn id="dom-iframe-sandbox" title="dom-iframe-sandbox"><code>sandbox</code></dfn>, and <dfn id="dom-iframe-seamless" title="dom-iframe-seamless"><code>seamless</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  <p>The <dfn id="dom-iframe-contentdocument" title="dom-iframe-contentDocument"><code>contentDocument</code></dfn>
  IDL attribute must return the <code><a href="dom.html#document">Document</a></code> object of the
  <a href="browsers.html#active-document">active document</a> of the <code><a href="#the-iframe-element">iframe</a></code> element's
  <a href="browsers.html#nested-browsing-context">nested browsing context</a>, if any, or null otherwise.</p>

  <p>The <dfn id="dom-iframe-contentwindow" title="dom-iframe-contentWindow"><code>contentWindow</code></dfn>
  IDL attribute must return the <code><a href="browsers.html#windowproxy">WindowProxy</a></code> object of the
  <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#nested-browsing-context">nested browsing
  context</a>, if any, or null otherwise.</p>

  </div>

  <div class="example">

   <p>Here is an example of a page using an <code><a href="#the-iframe-element">iframe</a></code> to
   include advertising from an advertising broker:</p>

   <pre>&lt;iframe src="http://ads.example.com/?customerid=923513721&amp;amp;format=banner"
        width="468" height="60"&gt;&lt;/iframe&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: dimension-attributes.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.17 Dimension attributes &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="mathml.html" title="4.8.15 MathML" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="tabular-data.html" title="4.9 Tabular data" 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="mathml.html">&#8592; 4.8.15 MathML</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="tabular-data.html">4.9 Tabular data &#8594;</a>
  </div>

  <h4 id="dimension-attributes"><span class="secno">4.8.17 </span><dfn>Dimension attributes</dfn></h4>

  <p><span class="impl"><strong>Author requirements</strong>:</span>
  The <dfn id="attr-dim-width" title="attr-dim-width"><code>width</code></dfn> and <dfn id="attr-dim-height" title="attr-dim-height"><code>height</code></dfn> attributes on
  <code><a href="the-img-element.html#the-img-element">img</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-embed-element.html#the-embed-element">embed</a></code>,
  <code><a href="the-object-element.html#the-object-element">object</a></code>, <code><a href="the-video-element.html#the-video-element">video</a></code>, and, when their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#image-button-state-(type=image)" title="attr-input-type-image">Image Button</a> state,
  <code><a href="the-input-element.html#the-input-element">input</a></code> elements may be specified to give the dimensions
  of the visual content of the element (the width and height
  respectively, relative to the nominal direction of the output
  medium), in CSS pixels. The attributes, if specified, must have
  values that are <a href="common-microsyntaxes.html#valid-non-negative-integer" title="valid non-negative integer">valid
  non-negative integers</a>.</p>

  <p>The specified dimensions given may differ from the dimensions
  specified in the resource itself, since the resource may have a
  resolution that differs from the CSS pixel resolution. (On screens,
  CSS pixels have a resolution of 96ppi, but in general the CSS pixel
  resolution depends on the reading distance.) If both attributes are
  specified, then one of the following statements must be true:</p>

  <ul><li><span title=""><var title="">specified width</var> - 0.5 &#8804;
             <var title="">specified height</var> * <var title="">target ratio</var> &#8804;
             <var title="">specified width</var> + 0.5</span></li>

   <li><span title=""><var title="">specified height</var> - 0.5 &#8804;
             <var title="">specified width</var> / <var title="">target ratio</var> &#8804;
             <var title="">specified height</var> + 0.5</span></li>

   <li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li>

  </ul><p>The <var title="">target ratio</var> is the ratio of the
  intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified
  height</var> are the values of the <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> and <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code> attributes respectively.</p>

  <p>The two attributes must be omitted if the resource in question
  does not have both an intrinsic width and an intrinsic height.</p>

  <p>If the two attributes are both zero, it indicates that the
  element is not intended for the user (e.g. it might be a part of a
  service to count page views).</p>

  <p class="note">The dimension attributes are not intended to be used
  to stretch the image.</p>

  <div class="impl">

  <p><strong>User agent requirements</strong>: User agents are
  expected to use these attributes <a href="rendering.html#dimRendering">as hints
  for the rendering</a>.</p>

  <p>The <dfn id="dom-dim-width" title="dom-dim-width"><code>width</code></dfn> and <dfn id="dom-dim-height" title="dom-dim-height"><code>height</code></dfn> IDL attributes on
  the <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-embed-element.html#the-embed-element">embed</a></code>, <code><a href="the-object-element.html#the-object-element">object</a></code>,
  and <code><a href="the-video-element.html#the-video-element">video</a></code> elements must <a href="common-dom-interfaces.html#reflect">reflect</a> the
  respective content attributes of the same name.</p>

  <p class="note">For <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-embed-element.html#the-embed-element">embed</a></code>, and
  <code><a href="the-object-element.html#the-object-element">object</a></code> the IDL attributes are <code>DOMString</code>;
  for <code><a href="the-video-element.html#the-video-element">video</a></code> the IDL attributes are <code>unsigned
  long</code>.</p>

  <p class="note">The corresponding IDL attributes for <code title="dom-img-height"><a href="the-img-element.html#dom-img-height">img</a></code> and <code title="dom-input-height"><a href="the-input-element.html#dom-input-height">input</a></code> elements are defined in those
  respective elements' sections, as they are slightly more specific to
  those elements' other behaviors.</p>

  </div>



  </body></html>
--- NEW FILE: association-of-controls-and-forms.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.18 Association of controls and forms &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-meter-element.html" title="4.10.17 The meter element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="attributes-common-to-form-controls.html" title="4.10.19 Attributes common to form controls" 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-meter-element.html">&#8592; 4.10.17 The meter element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="attributes-common-to-form-controls.html">4.10.19 Attributes common to form controls &#8594;</a>
  </div>

  <h4 id="association-of-controls-and-forms"><span class="secno">4.10.18 </span>Association of controls and forms</h4>

  <p>A <a href="forms.html#form-associated-element">form-associated element</a> can have a relationship
  with a <code><a href="the-form-element.html#the-form-element">form</a></code> element, which is called the element's
  <dfn id="form-owner">form owner</dfn>. If a <a href="forms.html#form-associated-element">form-associated element</a> is
  not associated with a <code><a href="the-form-element.html#the-form-element">form</a></code> element, its <a href="#form-owner">form
  owner</a> is said to be null.</p>

  <p>A <a href="forms.html#form-associated-element">form-associated element</a> is, by default, associated
  with its <span class="impl">nearest</span> ancestor
  <code><a href="the-form-element.html#the-form-element">form</a></code> element<span class="impl"> (as described
  below)</span>, but may have a <dfn id="attr-fae-form" title="attr-fae-form"><code>form</code></dfn> attribute specified to
  override this.</p>

  <p class="note">This feature allows authors to work around the lack
  of support for nested <code><a href="the-form-element.html#the-form-element">form</a></code> elements.</p>

  <p>If a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute specified, then that
  attribute's value must be the <a href="infrastructure.html#concept-id" title="concept-id">ID</a> of a <code><a href="the-form-element.html#the-form-element">form</a></code> element in
  the element's owner <code><a href="dom.html#document">Document</a></code>.</p>

  <div class="impl">

  <p class="note">The rules in this section are complicated by the
  fact that although conforming documents will never contain nested
  <code><a href="the-form-element.html#the-form-element">form</a></code> elements, it is quite possible (e.g. using a
  script that performs DOM manipulation) to generate documents that
  have such nested elements. They are also complicated by rules in the
  HTML parser that, for historical reasons, can result in a
  <a href="forms.html#form-associated-element">form-associated element</a> being associated with a
  <code><a href="the-form-element.html#the-form-element">form</a></code> element that is not its ancestor.</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a> is created, its
  <a href="#form-owner">form owner</a> must be initialized to null (no owner).</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a> is to be <dfn id="concept-form-association" title="concept-form-association">associated</dfn> with a form, its
  <a href="#form-owner">form owner</a> must be set to that form.</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a> or one of its
  ancestors is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a
  document">inserted into a <code>Document</code></a>, then the
  user agent must <a href="#reset-the-form-owner">reset the form owner</a> of that
  <a href="forms.html#form-associated-element">form-associated element</a>. <span class="note">The
  <a href="parsing.html#html-parser">HTML parser</a> overrides this requirement when inserting
  form controls.</span></p>

  <p>When an element is <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a
  document">removed from a <code>Document</code></a> resulting in a
  <a href="forms.html#form-associated-element">form-associated element</a> and its <a href="#form-owner">form owner</a>
  (if any) no longer being in the same <span>host subtree</span>, then
  the user agent must <a href="#reset-the-form-owner">reset the form owner</a> of that
  <a href="forms.html#form-associated-element">form-associated element</a>.</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a>'s <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is set, changed, or
  removed, then the user agent must <a href="#reset-the-form-owner">reset the form owner</a>
  of that element.</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute and the <a href="infrastructure.html#concept-id" title="concept-id">ID</a> of any of the elements in the
  <code><a href="dom.html#document">Document</a></code> changes, then the user agent must <a href="#reset-the-form-owner">reset
  the form owner</a> of that <a href="forms.html#form-associated-element">form-associated
  element</a>.</p>

  <p>When a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute and an element with an
  <a href="infrastructure.html#concept-id" title="concept-id">ID</a> is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element
  into a document">inserted into</a> or <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an
  element from a document">removed from</a> the
  <code><a href="dom.html#document">Document</a></code>, then the user agent must <a href="#reset-the-form-owner">reset the form
  owner</a> of that <a href="forms.html#form-associated-element">form-associated element</a>.</p>

  <p>When the user agent is to <dfn id="reset-the-form-owner">reset the form owner</dfn> of a
  <a href="forms.html#form-associated-element">form-associated element</a>, it must run the following
  steps:</p>

  <ol><li><p>If the element's <a href="#form-owner">form owner</a> is not null, and
   the element's <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> content
   attribute is not present, and the element's <a href="#form-owner">form owner</a>
   is its nearest <code><a href="the-form-element.html#the-form-element">form</a></code> element ancestor after the change
   to the ancestor chain, then do nothing, and abort these
   steps.</p></li>

   <li><p>Let the element's <a href="#form-owner">form owner</a> be null.</p></li>

   <li>

    <p>If the element has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>
    content attribute and is itself <a href="infrastructure.html#in-a-document" title="in a Document">in a
    <code>Document</code></a>, then run these substeps:</p>

    <ol><!-- note that this ignores the name="" attribute and is
     unaffected by quirks mode (it's always case sensitive) --><li><p>If the first element <a href="infrastructure.html#in-a-document" title="in a Document">in the
     <code>Document</code></a> to have an <a href="infrastructure.html#concept-id" title="concept-id">ID</a> that is <a href="infrastructure.html#case-sensitive" title="case-sensitive">case-sensitively</a> equal to the
     element's <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> content
     attribute's value is a <code><a href="the-form-element.html#the-form-element">form</a></code> element, then <a href="#concept-form-association" title="concept-form-association">associate</a> the
     <a href="forms.html#form-associated-element">form-associated element</a> with that <code><a href="the-form-element.html#the-form-element">form</a></code>
     element.</p></li>

     <li><p>Abort the "reset the form owner" steps.</p></li>

    </ol></li>

   <li><p>Otherwise, if the <a href="forms.html#form-associated-element">form-associated element</a> in
   question has an ancestor <code><a href="the-form-element.html#the-form-element">form</a></code> element, then <a href="#concept-form-association" title="concept-form-association">associate</a> the
   <a href="forms.html#form-associated-element">form-associated element</a> with the nearest such ancestor
   <code><a href="the-form-element.html#the-form-element">form</a></code> element.</p></li>

   <li><p>Otherwise, the element is left unassociated.</p></li>

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

   <p>In the following non-conforming snippet:</p>

   <pre class="bad">...
 &lt;form id="a"&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
 &lt;/form&gt;
 &lt;script&gt;
  document.getElementById('b').innerHTML =
     '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;form id="c"&gt;&lt;input id="d"&gt;&lt;/table&gt;' +
     '&lt;input id="e"&gt;';
 &lt;/script&gt;
...</pre>

   <p>The <a href="#form-owner">form owner</a> of "d" would be the inner nested
   form "c", while the <a href="#form-owner">form owner</a> of "e" would be the
   outer form "a".</p>

   <p>This happens as follows: First, the "e" node gets associated
   with "c" in the <a href="parsing.html#html-parser">HTML parser</a>. Then, the <code title="dom-innerHTML"><a href="infrastructure.html#dom-innerhtml">innerHTML</a></code> algorithm moves the nodes
   from the temporary document to the "b" element. At this point, the
   nodes see their ancestor chain change, and thus all the "magic"
   associations done by the parser are reset to normal ancestor
   associations.</p>

   <p>This example is a non-conforming document, though, as it is a
   violation of the content models to nest <code><a href="the-form-element.html#the-form-element">form</a></code>
   elements.</p>

  </div>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">element</var> . <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code></dt>

   <dd>

    <p>Returns the element's <a href="#form-owner">form owner</a>.</p>

    <p>Returns null if there isn't one.</p>

   </dd>

  </dl><div class="impl">

  <p><a href="forms.html#form-associated-element" title="form-associated element">Form-associated
  elements</a> have a <dfn id="dom-fae-form" title="dom-fae-form"><code>form</code></dfn> IDL attribute, which,
  on getting, must return the element's <a href="#form-owner">form owner</a>, or
  null if there isn't one.</p>

  </div>
<!--TOPIC:HTML-->



  </body></html>
--- NEW FILE: common-dom-interfaces.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>2.8 Common DOM interfaces &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1278 lines suppressed...]

  <p>There is an <dfn id="implied-strong-reference">implied strong reference</dfn> from any IDL
  attribute that returns a pre-existing object to that object.</p>

  <div class="example">

   <p>For example, the <code>document.location</code> attribute means
   that there is a strong reference from a <code><a href="dom.html#document">Document</a></code>
   object to its <code><a href="history.html#location">Location</a></code> object. Similarly, there is
   always a strong reference from a <code><a href="dom.html#document">Document</a></code> to any
   descendant nodes, and from any node to its owner
   <code><a href="dom.html#document">Document</a></code>.</p>

  </div>

  </div>


<!--TOPIC:HTML Syntax and Parsing-->
  </body></html>
--- NEW FILE: the-strong-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.3 The strong element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-em-element.html" title="4.6.2 The em element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-small-element.html" title="4.6.4 The small 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-em-element.html">&#8592; 4.6.2 The em element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-small-element.html">4.6.4 The small element &#8594;</a>
  </div>

  <h4 id="the-strong-element"><span class="secno">4.6.3 </span>The <dfn><code>strong</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-strong-element">strong</a></code> element <a href="rendering.html#represents">represents</a> strong
  importance for its contents.</p>

  <p>The relative level of importance of a piece of content is given
  by its number of ancestor <code><a href="#the-strong-element">strong</a></code> elements; each
  <code><a href="#the-strong-element">strong</a></code> element increases the importance of its
  contents.</p>

  <p>Changing the importance of a piece of text with the
  <code><a href="#the-strong-element">strong</a></code> element does not change the meaning of the
  sentence.</p>

  <div class="example">
   <p>Here is an example of a warning notice in a game, with the
   various parts marked up according to how important they are:</p>
   <!-- DO NOT REFLOW THIS EXAMPLE it has been carefully balanced -->
   <pre>&lt;p&gt;&lt;strong&gt;Warning.&lt;/strong&gt; This dungeon is dangerous.
&lt;strong&gt;Avoid the ducks.&lt;/strong&gt; Take any gold you find.
&lt;strong&gt;&lt;strong&gt;Do not take any of the diamonds&lt;/strong&gt;,
they are explosive and &lt;strong&gt;will destroy anything within
ten meters.&lt;/strong&gt;&lt;/strong&gt; You have been warned.&lt;/p&gt;</pre>
  </div>


  </body></html>
--- NEW FILE: the-form-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.3 The form element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="forms.html" title="4.10 Forms" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-fieldset-element.html" title="4.10.4 The fieldset 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="forms.html">&#8592; 4.10 Forms</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-fieldset-element.html">4.10.4 The fieldset element &#8594;</a>
  </div>

  <h4 id="the-form-element"><span class="secno">4.10.3 </span>The <dfn><code>form</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#flow-content-1">Flow content</a>, but with no <code><a href="#the-form-element">form</a></code> element 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>
   <dd><code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code></dd>
   <dd><code title="attr-fs-action"><a href="form-submission.html#attr-fs-action">action</a></code></dd>
   <dd><code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">autocomplete</a></code></dd>
   <dd><code title="attr-fs-enctype"><a href="form-submission.html#attr-fs-enctype">enctype</a></code></dd>
   <dd><code title="attr-fs-method"><a href="form-submission.html#attr-fs-method">method</a></code></dd>
   <dd><code title="attr-form-name"><a href="#attr-form-name">name</a></code></dd>
   <dd><code title="attr-fs-novalidate"><a href="form-submission.html#attr-fs-novalidate">novalidate</a></code></dd>
   <dd><code title="attr-fs-target"><a href="form-submission.html#attr-fs-target">target</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">[OverrideBuiltins]
interface <dfn id="htmlformelement">HTMLFormElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-form-acceptcharset" title="dom-form-acceptCharset">acceptCharset</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-action" title="dom-fs-action">action</a>;
           attribute DOMString <a href="#dom-form-autocomplete" title="dom-form-autocomplete">autocomplete</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-enctype" title="dom-fs-enctype">enctype</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-encoding" title="dom-fs-encoding">encoding</a>;<!-- historical artefact -->
           attribute DOMString <a href="form-submission.html#dom-fs-method" title="dom-fs-method">method</a>;
           attribute DOMString <a href="#dom-form-name" title="dom-form-name">name</a>;
           attribute boolean <a href="form-submission.html#dom-fs-novalidate" title="dom-fs-noValidate">noValidate</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-target" title="dom-fs-target">target</a>;

  readonly attribute <a href="common-dom-interfaces.html#htmlformcontrolscollection-0">HTMLFormControlsCollection</a> <a href="#dom-form-elements" title="dom-form-elements">elements</a>;
  readonly attribute long <a href="#dom-form-length" title="dom-form-length">length</a>;
  <a href="#dom-form-item" title="dom-form-item">getter</a> <a href="infrastructure.html#element">Element</a> (unsigned long index);
  <a href="#dom-form-nameditem" title="dom-form-namedItem">getter</a> object (DOMString name);

  void <a href="#dom-form-submit" title="dom-form-submit">submit</a>();
  void <a href="#dom-form-reset" title="dom-form-reset">reset</a>();
  boolean <a href="#dom-form-checkvalidity" title="dom-form-checkValidity">checkValidity</a>();
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-form-element">form</a></code> element <a href="rendering.html#represents">represents</a> a
  collection of <a href="forms.html#form-associated-element" title="form-associated element">form-associated
  elements</a>, some of which can represent editable values that
  can be submitted to a server for processing.</p>

  <p>The <dfn id="attr-form-accept-charset" title="attr-form-accept-charset"><code>accept-charset</code></dfn>
  attribute gives the character encodings that are to be used for the
  submission. If specified, the value must be an <a href="common-microsyntaxes.html#ordered-set-of-unique-space-separated-tokens">ordered set of
  unique space-separated tokens</a> that are <a href="infrastructure.html#ascii-case-insensitive">ASCII
  case-insensitive</a>, and each token must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
  case-insensitive</a> match for the <a href="infrastructure.html#preferred-mime-name">preferred MIME
  name</a> of an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.
  <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p>

  <p>The <dfn id="attr-form-name" title="attr-form-name"><code>name</code></dfn> attribute
  represents the <code><a href="#the-form-element">form</a></code>'s name within the <code title="dom-document-forms"><a href="dom.html#dom-document-forms">forms</a></code> collection. The value must
  not be the empty string, and the value must be unique amongst the
  <code><a href="#the-form-element">form</a></code> elements in the <code title="dom-document-forms"><a href="dom.html#dom-document-forms">forms</a></code> collection that it is in, if
  any.</p>

  <p>The <dfn id="attr-form-autocomplete" title="attr-form-autocomplete"><code>autocomplete</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has
  two states. The <code title="attr-form-autocomplete-on">on</code>
  keyword maps to the <dfn id="attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</dfn> state, and the
  <code title="attr-form-autocomplete-off">off</code> keyword maps to
  the <dfn id="attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</dfn>
  state. The attribute may also be omitted. The <i>missing value
  default</i> is the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state. The <a href="#attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</a> state indicates
  that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have
  their <a href="common-input-element-attributes.html#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">off</i>; the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state indicates
  that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have
  their <a href="common-input-element-attributes.html#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">on</i>.</p>

  <p>The <code title="attr-fs-action"><a href="form-submission.html#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="form-submission.html#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="form-submission.html#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="form-submission.html#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="form-submission.html#attr-fs-target">target</a></code> attributes are <a href="form-submission.html#attributes-for-form-submission">attributes
  for form submission</a>.</p>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">form</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt>

   <dd>

    <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the form controls in
    the form (excluding image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">form</var> . <code title="dom-form-length"><a href="#dom-form-length">length</a></code></dt>

   <dd>

    <p>Returns the number of form controls in the form (excluding
    image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">form</var>[<var title="">index</var>]</dt>
   <dt><var title="">form</var>(<var title="">index</var>)</dt>

   <dd>

    <p>Returns the <var title="">index</var>th element in the form
    (excluding image buttons for historical reasons).</p>

   </dd>

   <dt><var title="">form</var>[<var title="">name</var>]</dt>
   <dt><var title="">form</var>(<var title="">name</var>)</dt>

   <dd>

    <p>Returns the form control (or, if there are several, a
    <code><a href="common-dom-interfaces.html#radionodelist">RadioNodeList</a></code> of the form controls) in the form with
    the given <a href="infrastructure.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> (excluding image buttons for
    historical reasons); or, if there are none, returns the
    <code><a href="the-img-element.html#the-img-element">img</a></code> element with the given ID.</p>

    <p>Once an element has been referenced using a particular name,
    that name will continue being available as a way to reference that
    element in this method, even if the element's actual <a href="infrastructure.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> changes, for as long as the
    element remains in the <code><a href="dom.html#document">Document</a></code>.</p>

    <p>If there are multiple matching items, then a
    <code><a href="common-dom-interfaces.html#radionodelist">RadioNodeList</a></code> object containing all those elements is
    returned.</p>

   </dd>

   <dt><var title="">form</var> . <code title="dom-form-submit"><a href="#dom-form-submit">submit</a></code>()</dt>

   <dd>

    <p>Submits the form.</p>

   </dd>

   <dt><var title="">form</var> . <code title="dom-form-reset"><a href="#dom-form-reset">reset</a></code>()</dt>

   <dd>

    <p>Resets the form.</p>

   </dd>

   <dt><var title="">form</var> . <code title="dom-form-checkValidity"><a href="#dom-form-checkvalidity">checkValidity</a></code>()</dt>

   <dd>

    <p>Returns true if the form's controls are all valid; otherwise,
    returns false.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-form-autocomplete" title="dom-form-autocomplete"><code>autocomplete</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The <dfn id="dom-form-name" title="dom-form-name"><code>name</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-form-acceptcharset" title="dom-form-acceptCharset"><code>acceptCharset</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code> content
  attribute.</p>

  <hr><p>The <dfn id="dom-form-elements" title="dom-form-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="dom.html#document">Document</a></code> node while the <code><a href="#the-form-element">form</a></code>
  element is <a href="infrastructure.html#in-a-document">in a <code>Document</code></a> and rooted at the
  <code><a href="#the-form-element">form</a></code> element itself when it is not, whose filter
  matches <a href="forms.html#category-listed" title="category-listed">listed elements</a> whose
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a> is the <code><a href="#the-form-element">form</a></code> element, with the
  exception of <code><a href="the-input-element.html#the-input-element">input</a></code> elements whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="states-of-the-type-attribute.html#image-button-state-(type=image)" title="attr-input-type-image">Image Button</a> state, which must,
  for historical reasons, be excluded from this particular
  collection.</p>

  <p>The <dfn id="dom-form-length" title="dom-form-length"><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href="infrastructure.html#represented-by-the-collection" title="represented
  by the collection">represented</a> by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> collection.</p>

  <p>The <a href="infrastructure.html#supported-property-indices">supported property indices</a> at any instant are
  the indices supported by the object returned by the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> attribute at that
  instant.</p>

  <p>When a <code><a href="#the-form-element">form</a></code> element is <dfn id="dom-form-item" title="dom-form-item">indexed for indexed property retrieval</dfn>,
  the user agent must return the value returned by the <code title="dom-HTMLFormControlsCollection-item">item</code> method on
  the <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> collection, when
  invoked with the given index as its argument.</p>

  <hr><!-- Welcome to crazy town. Population: The Web. --><p>Each <code><a href="#the-form-element">form</a></code> element has a mapping of names to elements
  called the <dfn id="past-names-map">past names map</dfn>. It is used to persist names of
  controls even when they change names.</p>

  <p>The <a href="infrastructure.html#supported-property-names">supported property names</a> consist of the values
  of all the <code title="attr-id"><a href="global-attributes.html#the-id-attribute">id</a></code> and <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attributes of all the <a href="forms.html#category-listed" title="category-listed">listed elements</a> and <code><a href="the-img-element.html#the-img-element">img</a></code>
  elements that are descendants of the <code><a href="#the-form-element">form</a></code> element, and
  all the names currently in the <a href="#past-names-map">past names map</a>.</p>

  <p>When a <code><a href="#the-form-element">form</a></code> element is <dfn id="dom-form-nameditem" title="dom-form-namedItem">indexed for named property
  retrieval</dfn>, the user agent must run the following steps:</p>

  <ol><li><p>Let <var title="">candidates</var> be a <a href="infrastructure.html#live">live</a>
   <code><a href="common-dom-interfaces.html#radionodelist">RadioNodeList</a></code> object containing all the <a href="forms.html#category-listed" title="category-listed">listed elements</a> that are descendants
   of the <code><a href="#the-form-element">form</a></code> element and that have either an <code title="attr-id"><a href="global-attributes.html#the-id-attribute">id</a></code> attribute or a <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attribute equal to <var title="">name</var>, in <a href="infrastructure.html#tree-order">tree order</a>.</p></li>

   <li><p>If <var title="">candidates</var> is empty, let <var title="">candidates</var> be a <a href="infrastructure.html#live">live</a>
   <code><a href="common-dom-interfaces.html#radionodelist">RadioNodeList</a></code> object containing all the
   <code><a href="the-img-element.html#the-img-element">img</a></code> elements that are descendants of the
   <code><a href="#the-form-element">form</a></code> element and that have either an <code title="attr-id"><a href="global-attributes.html#the-id-attribute">id</a></code> attribute or a <code title="attr-img-name"><a href="obsolete.html#attr-img-name">name</a></code> attribute equal to <var title="">name</var>, in <a href="infrastructure.html#tree-order">tree order</a>.</p></li>

   <li><p>If <var title="">candidates</var> is empty, <var title="">name</var> is the name of one of the entries in the
   <code><a href="#the-form-element">form</a></code> element's <a href="#past-names-map">past names map</a>: return the
   object associated with <var title="">name</var> in that
   map.</p></li>

   <li><p>If <var title="">candidates</var> contains more than one
   node, return <var title="">candidates</var> and abort these
   steps.</p></li>

   <li><p>Otherwise, <var title="">candidates</var> contains exactly
   one node. Add a mapping from <var title="">name</var> to the node
   in <var title="">candidates</var> in the <code><a href="#the-form-element">form</a></code> element's
   <a href="#past-names-map">past names map</a>, replacing the previous entry with the
   same name, if any.</p></li>

   <li><p>Return the node in <var title="">candidates</var>.</p></li>

  </ol><p>If an element listed in the <code><a href="#the-form-element">form</a></code> element's <a href="#past-names-map">past
  names map</a> is removed from the <code><a href="dom.html#document">Document</a></code>, then its
  entries must be removed from the map.</p>

  <!--
    This ridiculous setup is intended to do as much of the right thing
    while still supporting code written to work in IE7. IE versions
    prior to IE8 do not update the names on the <form> element
    collection to match new names when elements are renamed, and there
    are enough pages that rename elements and then access them by
    their old name that we have to support this.

    But we still want to expose them using the new names, so as far as
    possible we pretend the legacy names aren't there except if
    there's no other element actually named that way.

    Removing the element did remove the legacy name in IE7:
    http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Dsubmit%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w(document.forms%5B0%5D.submit)%3B%0A%20w(document.forms%5B0%5D.removeChild(document.getElementsByTagName('input')%5B0%5D))%3B%0A%20w(document.forms%5B0%5D.length)%3B%0A%20try%20%7B%20document.forms%5B0%5D.submit()%3B%20%7D%20catch%20(e)%20%20%7B%20w(e.message)%20%7D%0A%3C%2Fscript%3E

    There's no interop on what happens when the name was originally a
    duplicate name, so we don't persist such accesses - at the time
    of writing, Safari returned the first element, Firefox returned
    null (as we do), and IE7 returned the original collection:
    http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Da%20id%3Dfirst%3E%3Cinput%20name%3Da%20id%3Dsecond%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w%28document.forms[0].a%29%3B%0A%20document.getElementsByTagName%28%27input%27%29[0].name%20%3D%20%27b%27%3B%0A%20document.getElementsByTagName%28%27input%27%29[1].name%20%3D%20%27b%27%3B%0A%20w%28document.forms[0].length%29%3B%0A%20w%28document.forms[0].a.id%29%3B%0A%3C%2Fscript%3E

    In addition, the <img> fallback nonsense is similarly here for
    legacy reasons. As is the exclusion of <input type=image>.

    Also, check this out:
    http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1220

  -->

  <!-- Now leaving crazy town. -->

  <hr><p>The <dfn id="dom-form-submit" title="dom-form-submit"><code>submit()</code></dfn>
  method, when invoked, must <a href="constraints.html#concept-form-submit" title="concept-form-submit">submit</a> the <code><a href="#the-form-element">form</a></code>
  element from the <code><a href="#the-form-element">form</a></code> element itself, with the <var title="">submitted from <code title="dom-form-submit"><a href="#dom-form-submit">submit()</a></code> method</var> flag set.</p>

  <p>The <dfn id="dom-form-reset" title="dom-form-reset"><code>reset()</code></dfn>
  method, when invoked, must run the following steps:</p>

  <ol><li><p>If the <code><a href="#the-form-element">form</a></code> element is marked as <i><a href="#locked-for-reset">locked for
   reset</a></i>, then abort these steps.</p></li>

   <li><p>Mark the <code><a href="#the-form-element">form</a></code> element as <dfn id="locked-for-reset">locked for
   reset</dfn>.</p></li>

   <li><p><a href="constraints.html#concept-form-reset" title="concept-form-reset">Reset</a> the
   <code><a href="#the-form-element">form</a></code> element.</p></li>

   <li><p>Unmark the <code><a href="#the-form-element">form</a></code> element as <i><a href="#locked-for-reset">locked for
   reset</a></i>.</p></li>

  </ol><p>If the <dfn id="dom-form-checkvalidity" title="dom-form-checkValidity"><code>checkValidity()</code></dfn>
  method is invoked, the user agent must <a href="constraints.html#statically-validate-the-constraints">statically validate the
  constraints</a> of the <code><a href="#the-form-element">form</a></code> element, and return true
  if the constraint validation return a <i>positive</i> result, and
  false if it returned a <i>negative</i> result.</p>

  </div>
<!--TOPIC:HTML-->

  <div class="example">

   <p>This example shows two search forms:</p>

   <pre>&lt;form action="http://www.google.com/search" method="get"&gt;
 &lt;label&gt;Google: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;
&lt;form action="http://www.bing.com/search" method="get"&gt;
 &lt;label&gt;Bing: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: the-li-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.7 The li element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-ul-element.html" title="4.5.6 The ul element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-dl-element.html" title="4.5.8 The dl 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-ul-element.html">&#8592; 4.5.6 The ul element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-dl-element.html">4.5.8 The dl element &#8594;</a>
  </div>

  <h4 id="the-li-element"><span class="secno">4.5.7 </span>The <dfn><code>li</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>Inside <code><a href="the-ol-element.html#the-ol-element">ol</a></code> elements.</dd>
   <dd>Inside <code><a href="the-ul-element.html#the-ul-element">ul</a></code> elements.</dd>
   <dd>Inside <code><a href="the-menu-element.html#the-menu-element">menu</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>.</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>If the element is a child of an <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element: <code title="attr-li-value"><a href="#attr-li-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">interface <dfn id="htmllielement">HTMLLIElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute long <a href="#dom-li-value" title="dom-li-value">value</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-li-element">li</a></code> element <a href="rendering.html#represents">represents</a> a list
  item. If its parent element is an <code><a href="the-ol-element.html#the-ol-element">ol</a></code>, <code><a href="the-ul-element.html#the-ul-element">ul</a></code>,
  or <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element, then the element is an item of the
  parent element's list, as defined for those elements. Otherwise, the
  list item has no defined list-related relationship to any other
  <code><a href="#the-li-element">li</a></code> element.</p>

  <p>If the parent element is an <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element, then the
  <code><a href="#the-li-element">li</a></code> element has an <dfn id="ordinal-value">ordinal value</dfn>.</p>

  <p>The <dfn id="attr-li-value" title="attr-li-value"><code>value</code></dfn>
  attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving
  the <a href="#ordinal-value">ordinal value</a> of the list item.</p>

  <div class="impl">

  <p>If the <code title="attr-li-value"><a href="#attr-li-value">value</a></code> attribute is
  present, user agents must <a href="common-microsyntaxes.html#rules-for-parsing-integers" title="rules for parsing
  integers">parse it as an integer</a>, in order to determine the
  attribute's value. If the attribute's value cannot be converted to a
  number, the attribute must be treated as if it was absent. The
  attribute has no default value.</p>

  <p>The <code title="attr-li-value"><a href="#attr-li-value">value</a></code> attribute is
  processed relative to the element's parent <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element
  (q.v.), if there is one. If there is not, the attribute has no
  effect.</p>

  <p>The <dfn id="dom-li-value" title="dom-li-value"><code>value</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the value of the <code title="dom-li-value"><a href="#dom-li-value">value</a></code> content attribute.</p>

  </div>

  <div class="example">
   <p>The following example, the top ten movies are listed (in reverse
   order). Note the way the list is given a title by using 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>
   element.</p>
   <pre>&lt;figure&gt;
 &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
 &lt;ol&gt;
  &lt;li value="10"&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li value="9"&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li value="8"&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li value="7"&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
  &lt;li value="6"&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li value="5"&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
  &lt;li value="4"&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
  &lt;li value="3"&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
  &lt;li value="2"&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
  &lt;li value="1"&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
 &lt;/ol&gt;
&lt;/figure&gt;</pre>

   <p>The markup could also be written as follows, using the <code title="attr-ol-reversed"><a href="the-ol-element.html#attr-ol-reversed">reversed</a></code> attribute on the
   <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element:</p>

   <pre>&lt;figure&gt;
 &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
 &lt;ol reversed&gt;
  &lt;li&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
  &lt;li&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
 &lt;/ol&gt;
&lt;/figure&gt;</pre>
  </div>

  <p class="note">If the <code><a href="#the-li-element">li</a></code> element is the child of a
  <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element and itself has a child that defines a
  <a href="commands.html#concept-command" title="concept-command">command</a>, then the
  <code><a href="#the-li-element">li</a></code> element will match the <code title="selector-enabled"><a href="links.html#selector-enabled">:enabled</a></code> and <code title="selector-disabled"><a href="links.html#selector-disabled">:disabled</a></code> pseudo-classes in the
  same way as the first such child element does.</p>

  <p class="note">While it is conforming to include heading elements
  (e.g. <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>) inside <code><a href="#the-li-element">li</a></code> elements, it likely
  does not convey the semantics that the author intended. A heading
  starts a new section, so a heading in a list implicitly splits the
  list into spanning multiple sections.</p>



  </body></html>
--- NEW FILE: the-keygen-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.14 The keygen element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-textarea-element.html" title="4.10.13 The textarea element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-output-element.html" title="4.10.15 The output 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-textarea-element.html">&#8592; 4.10.13 The textarea element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-output-element.html">4.10.15 The output element &#8594;</a>
  </div>

  <h4 id="the-keygen-element"><span class="secno">4.10.14 </span>The <dfn><code>keygen</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#interactive-content-0">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</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#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>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-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-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-keygen-keytype"><a href="#attr-keygen-keytype">keytype</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="htmlkeygenelement">HTMLKeygenElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute DOMString <a href="#dom-keygen-challenge" title="dom-keygen-challenge">challenge</a>;
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-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="#dom-keygen-keytype" title="dom-keygen-keytype">keytype</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-keygen-type" title="dom-keygen-type">type</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);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-keygen-element">keygen</a></code> element <a href="rendering.html#represents">represents</a> a key
  pair generator control. When the control's form is submitted, the
  private key is stored in the local keystore, and the public key is
  packaged and sent to the server.</p>

  <p>The <dfn id="attr-keygen-challenge" title="attr-keygen-challenge"><code>challenge</code></dfn> attribute
  may be specified. Its value will be packaged with the submitted
  key.</p>

  <p>The <dfn id="attr-keygen-keytype" title="attr-keygen-keytype"><code>keytype</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
  table lists the keywords and states for the attribute &#8212; the
  keywords in the left column map to the states listed in the cell in
  the second column on the same row as the keyword. User agents are
  not required to support these values, and must only recognize values
  whose corresponding algorithms they support.</p>

  <table><thead><tr><th> Keyword </th><th> State
   </th></tr></thead><tbody><tr><td> <code title="">rsa</code>
     </td><td> <i title="">RSA</i>
<!-- v2 (see below)
    <tr>
     <td> <code title="">ec</code>
     <td> <i title="">EC</i>
-->
  </td></tr></tbody></table><p>The <i>invalid value default</i> state is the <i title="">unknown</i> state. The <i>missing value default</i> state
  is the <i title="">RSA</i> state, if it is supported, or the <i title="">unknown</i> state otherwise.</p>

  <p class="note">This specification does not specify what key types
  user agents are to support &#8212; it is possible for a user agent
  to not support any key types at all.</p>

  <div class="impl">

  <p>The user agent may expose a user interface for each
  <code><a href="#the-keygen-element">keygen</a></code> element to allow the user to configure settings
  of the element's key pair generator, e.g. the key length.</p>

  <p>The <a href="constraints.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-keygen-element">keygen</a></code> elements is to set these
  various configuration settings back to their defaults.</p>

  <p>The element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is the
  string returned from the following algorithm:</p>

  <ol><li>

    <p>Use the appropriate step from the following list:</p>

    <dl class="switch"><!-- v2 (see above)

     <dt>If the <code title="attr-keygen-keytype">keytype</code>
     attribute is in the <i title="">EC</i> state</dt>

     <dd>

      <p>...

      http://www.mail-archive.com/dev-tech-crypto@lists.mozilla.org/msg05902.html

     </dd>

     --><dt>If the <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code>
     attribute is in the <i title="">RSA</i> state</dt>

     <dd>

      <p>Generate an RSA key pair using the settings given by the
      user, if appropriate, using the <code title="">md5WithRSAEncryption</code> RSA signature algorithm
      (the signature algorithm with MD5 and the RSA encryption
      algorithm) referenced in section 2.2.1 ("RSA Signature
      Algorithm") of RFC 3279, and defined in RFC 2313. <a href="references.html#refsRFC3279">[RFC3279]</a> <a href="references.html#refsRFC2313">[RFC2313]</a></p>

     </dd>

     <dt>Otherwise, the <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code> attribute is in the <i title="">unknown</i> state</dt>

     <dd>

      <p>The given key type is not supported. Return the empty string
      and abort this algorithm.</p>

     </dd>

    </dl><p>Let <var title="">private key</var> be the generated private key.</p>

    <p>Let <var title="">public key</var> be the generated public key.</p>

    <p>Let <var title="">signature algorithm</var> be the selected
    signature algorithm.</p>

   </li>

   <li>

    <p>If the element has a <code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code> attribute, then let
    <var title="">challenge</var> be that attribute's value.
    Otherwise, let <var title="">challenge</var> be the empty
    string.</p>

   </li>

   <li>

    <p>Let <var title="">algorithm</var> be an ASN.1 <code title="">AlgorithmIdentifier</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field giving the
    ASN.1 OID used to identify <var title="">signature
    algorithm</var>, using the OIDs defined in section 2.2 ("Signature
    Algorithms") of RFC 3279, and the <code title="">parameters</code>
    field set up as required by RFC 3279 for <code title="">AlgorithmIdentifier</code> structures for that
    algorithm. <a href="references.html#refsX690">[X690]</a> <a href="references.html#refsRFC5280">[RFC5280]</a> <a href="references.html#refsRFC3279">[RFC3279]</a></p>

   </li>

   <li>

    <p>Let <var title="">spki</var> be an ASN.1 <code title="">SubjectPublicKeyInfo</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field set to the
    <var title="">algorithm</var> structure from the previous step,
    and the <code title="">subjectPublicKey</code> field set to the
    BIT STRING value resulting from ASN.1 DER encoding the <var title="">public key</var>. <a href="references.html#refsX690">[X690]</a> <a href="references.html#refsRFC5280">[RFC5280]</a></p>

   </li>

   <li>

    <p>Let <var title="">publicKeyAndChallenge</var> be an ASN.1
    <code><a href="#publickeyandchallenge">PublicKeyAndChallenge</a></code> structure as defined below,
    with the <code title="">spki</code> field set to the <var title="">spki</var> structure from the previous step, and the
    <code title="">challenge</code> field set to the string <var title="">challenge</var> obtained earlier. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signature</var> be the BIT STRING value
    resulting from ASN.1 DER encoding the signature generated by
    applying the <var title="">signature algorithm</var> to the byte
    string obtained by ASN.1 DER encoding the <var title="">publicKeyAndChallenge</var> structure, using <var title="">private key</var> as the signing key. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signedPublicKeyAndChallenge</var> be an ASN.1
    <code><a href="#signedpublickeyandchallenge">SignedPublicKeyAndChallenge</a></code> structure as defined
    below, with the <code title="">publicKeyAndChallenge</code> field
    set to the <var title="">publicKeyAndChallenge</var> structure,
    the <code title="">signatureAlgorithm</code> field set to the <var title="">algorithm</var> structure, and the <code title="">signature</code> field set to the BIT STRING <var title="">signature</var> from the previous step. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Return the result of base64 encoding the result of ASN.1 DER
    encoding the <var title="">signedPublicKeyAndChallenge</var>
    structure. <a href="references.html#refsRFC4648">[RFC4648]</a><!--base64--> <a href="references.html#refsX690">[X690]</a></p>

   </li>

  </ol><p>The data objects used by the above algorithm are defined as
  follows. These definitions use the same "ASN.1-like" syntax defined
  by RFC 5280. <a href="references.html#refsRFC5280">[RFC5280]</a></p>

  <pre class="asn"><dfn id="publickeyandchallenge">PublicKeyAndChallenge</dfn> ::= SEQUENCE {
    spki <span>SubjectPublicKeyInfo</span>,
    challenge IA5STRING
}

<dfn id="signedpublickeyandchallenge">SignedPublicKeyAndChallenge</dfn> ::= SEQUENCE {
    publicKeyAndChallenge <a href="#publickeyandchallenge">PublicKeyAndChallenge</a>,
    signatureAlgorithm <span>AlgorithmIdentifier</span>,
    signature BIT STRING
}</pre>

  <hr><p><strong>Constraint validation</strong>: The <code><a href="#the-keygen-element">keygen</a></code>
  element is <a href="constraints.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  </div>

  <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-keygen-element">keygen</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. The <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">keygen</var> . <code title="attr-keygen-type">type</code></dt>

   <dd>

    <p>Returns the string "<code title="">keygen</code>".</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-keygen-challenge" title="dom-keygen-challenge"><code>challenge</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-keygen-keytype" title="dom-keygen-keytype"><code>keytype</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The <dfn id="dom-keygen-type" title="dom-keygen-type"><code>type</code></dfn> IDL
  attribute must return the value "<code title="">keygen</code>".</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-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>
<!--TOPIC:HTML-->

  <p class="note">This specification does not specify how the private
  key generated is to be used. It is expected that after receiving the
  <code><a href="#signedpublickeyandchallenge">SignedPublicKeyAndChallenge</a></code> (SPKAC) structure, the
  server will generate a client certificate and offer it back to the
  user for download; this certificate, once downloaded and stored in
  the key store along with the private key, can then be used to
  authenticate to services that use TLS and certificate
  authentication.</p>

  <!-- how does the UA know which private key is associated with a
  certificate it gets back after the server has taken the public key
  created by <keygen> and turned it into a client cert? -->

  <div class="example">

   <p>To generate a key pair, add the private key to the user's key
   store, and submit the public key to the server, markup such as the
   following can be used:</p>

   <pre>&lt;form action="processkey.cgi" method="post" enctype="multipart/form-data"&gt;
 &lt;p&gt;&lt;keygen name="key"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit value="Submit key..."&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

   <p>The server will then receive a form submission with a packaged
   RSA public key as the value of "<code title="">key</code>". This
   can then be used for various purposes, such as generating a client
   certificate, as mentioned above.</p>

  </div>



  </body></html>
--- NEW FILE: the-link-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.2.4 The link element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-base-element.html" title="4.2.3 The base element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-meta-element.html" title="4.2.5 The meta 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-base-element.html">&#8592; 4.2.3 The base element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-meta-element.html">4.2.5 The meta element &#8594;</a>
  </div>

  <h4 id="the-link-element"><span class="secno">4.2.4 </span>The <dfn><code>link</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>
<!--MD-->
   <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#metadata-content-0">metadata content</a> is expected.</dd>
   <dd>In a <code><a href="the-noscript-element.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="the-head-element.html#the-head-element">head</a></code> element.</dd>
<!--MD-->
   <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-link-href"><a href="#attr-link-href">href</a></code></dd>
   <dd><code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code></dd>
   <dd><code title="attr-link-media"><a href="#attr-link-media">media</a></code></dd>
   <dd><code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code></dd>
   <dd><code title="attr-link-type"><a href="#attr-link-type">type</a></code></dd>
   <dd><code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code></dd>
   <dd>Also, the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> 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>
<pre class="idl">interface <dfn id="htmllinkelement">HTMLLinkElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-link-disabled" title="dom-link-disabled">disabled</a>;
           attribute DOMString <a href="#dom-link-href" title="dom-link-href">href</a>;
           attribute DOMString <a href="#dom-link-rel" title="dom-link-rel">rel</a>;
  readonly attribute <a href="infrastructure.html#domtokenlist">DOMTokenList</a> <a href="#dom-link-rellist" title="dom-link-relList">relList</a>;
           attribute DOMString <a href="#dom-link-media" title="dom-link-media">media</a>;
           attribute DOMString <a href="#dom-link-hreflang" title="dom-link-hreflang">hreflang</a>;
           attribute DOMString <a href="#dom-link-type" title="dom-link-type">type</a>;
  [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="infrastructure.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-link-sizes" title="dom-link-sizes">sizes</a>;
};
<a href="#htmllinkelement">HTMLLinkElement</a> implements <a href="infrastructure.html#linkstyle">LinkStyle</a>;</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-link-element">link</a></code> element allows authors to link their
  document to other resources.</p>

  <p>The destination of the link(s) is given by the <dfn id="attr-link-href" title="attr-link-href"><code>href</code></dfn> attribute, which must
  be present and must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
  surrounded by spaces</a>. <span class="impl">If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute is absent, then the
  element does not define a link.</span></p>

<!--MD--><!--MD-->
  <p>A <code><a href="#the-link-element">link</a></code> element must have <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute.</p>
<!--MD-->

  <p>The types of link indicated (the relationships) are given by the
  value of the <dfn id="attr-link-rel" title="attr-link-rel"><code>rel</code></dfn>
  attribute, which, if present, must have a value that is a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set
  of space-separated tokens</a>. The <a href="links.html#linkTypes">allowed
  keywords and their meanings</a> are defined in a later
  section. <span class="impl">If the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute is absent, has no
  keywords, or if none of the keywords used are allowed according to
  the definitions in this specification, then the element does not
  create any links.</span></p>

  <p>Two categories of links can be created using the
  <code><a href="#the-link-element">link</a></code> element: <a href="links.html#external-resource-link" title="external resource
  link">Links to external resources</a> and <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>. The <a href="links.html#linkTypes">link
  types section</a> defines whether a particular link type is an
  external resource or a hyperlink. One <code><a href="#the-link-element">link</a></code> element can
  create multiple links (of which some might be external resource
  links and some might be hyperlinks); exactly which and how many
  links are created depends on the keywords given in the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute. User agents must process
  the links on a per-link basis, not a per-element basis.</p>

  <p class="note">Each link created for a <code><a href="#the-link-element">link</a></code> element is
  handled separately. For instance, if there are two <code><a href="#the-link-element">link</a></code>
  elements with <code title="">rel="stylesheet"</code>, they each
  count as a separate external resource, and each is affected by its
  own attributes independently. Similarly, if a single
  <code><a href="#the-link-element">link</a></code> element has a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
  <a href="links.html#hyperlink">hyperlink</a> (for the <code title="rel-next"><a href="links.html#link-type-next">next</a></code>
  keyword) and an <a href="links.html#external-resource-link">external resource link</a> (for the <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword), and they are
  affected by other attributes (such as <code title="attr-link-media"><a href="#attr-link-media">media</a></code> or <code title="attr-link-title"><a href="#attr-link-title">title</a></code>) differently.</p>

  <div class="example">

   <p>For example, the following <code><a href="#the-link-element">link</a></code> element creates two
   hyperlinks (to the same page):</p>

   <pre>&lt;link rel="author license" href="/about"&gt;</pre>

   <p>The two links created by this element are one whose semantic is
   that the target page has information about the current page's
   author, and one whose semantic is that the target page has
   information regarding the license under which the current page is
   provided.</p>

  </div>

  <p>The exact behavior for links to external resources depends on the
  exact relationship, as defined for the relevant link type. Some of
  the attributes control whether or not the external resource is to be
  applied (as defined below).</p>

  <div class="impl">

  <p>For external resources that are represented in the
  DOM (for example, style sheets), the DOM representation must be made
  available even if the resource is not applied. To <dfn id="concept-link-obtain" title="concept-link-obtain">obtain the resource</dfn>, the user
  agent must run the following steps:</p>

  <ol><li><p>If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute's
   value is the empty string, then abort these steps.</p></li>

   <li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the
   <a href="urls.html#url">URL</a> given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute, relative to the
   element.</p></li>

   <li><p>If the previous step fails, then abort these steps.</p></li>

   <li><p><a href="urls.html#fetch">Fetch</a> the resulting <a href="urls.html#absolute-url">absolute
   URL</a>.</p></li> <!-- http-origin privacy sensitive -->

  </ol><p>User agents may opt to only try to obtain such resources when
  they are needed, instead of pro-actively <a href="urls.html#fetch" title="fetch">fetching</a> all the external resources that are
  not applied.</p>

  <p>The semantics of the protocol used (e.g. HTTP) must be followed
  when fetching external resources. (For example, redirects will be
  followed and 404 responses will cause the external resource to not
  be applied.)</p>

  <!-- the next few paragraph are similar to text in the <style> section -->
  <p>Once the attempts to obtain the resource and its <a href="infrastructure.html#critical-subresources">critical
  subresources</a> are complete, the user agent must, if the loads
  were successful, <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-load">load</code> at the
  <code><a href="#the-link-element">link</a></code> element, or, if the resource or one of its
  <a href="infrastructure.html#critical-subresources">critical subresources</a> failed to completely load for any
  reason (e.g. DNS error, HTTP 404 response, a connection being
  prematurely closed, unsupported Content-Type), <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-error">error</code> at the <code><a href="#the-link-element">link</a></code>
  element. Non-network errors in processing the resource or its
  subresources (e.g. CSS parse errors, PNG decoding errors) are not
  failures for the purposes of this paragraph.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
  source</a>.</p>

  <p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
  element's document until all the attempts to obtain the resource and
  its <a href="infrastructure.html#critical-subresources">critical subresources</a> are complete. (Resources that
  the user agent has not yet attempted to obtain, e.g. because it is
  waiting for the resource to be needed, do not <a href="the-end.html#delay-the-load-event">delay the load
  event</a>.)</p>

  <hr><p id="linkui">Interactive user agents may provide users with a
  means to <a href="links.html#following-hyperlinks-0" title="following hyperlinks">follow the
  hyperlinks</a> created using the <code><a href="#the-link-element">link</a></code> element,
  somewhere within their user interface. The exact interface is not
  defined by this specification, but it could include the following
  information (obtained from the element's attributes, again as
  defined below), in some form or another (possibly simplified), for
  each hyperlink created with each <code><a href="#the-link-element">link</a></code> element in the
  document:</p>

  <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given
   by the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute)</li>

   <li>The title of the resource (given by the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute).</li>

   <li>The address of the resource (given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute).</li>

   <li>The language of the resource (given by the <code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code> attribute).</li>

   <li>The optimum media for the resource (given by the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute).</li>

  </ul><p>User agents could also include other information, such as the
  type of the resource (as given by the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute).</p>

  </div>

  <p class="note">Hyperlinks created with the <code><a href="#the-link-element">link</a></code>
  element and its <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute
  apply to the whole page. This contrasts with the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code> attribute of <code><a href="the-a-element.html#the-a-element">a</a></code>
  and <code><a href="the-area-element.html#the-area-element">area</a></code> elements, which indicates the type of a link
  whose context is given by the link's location within the
  document.</p>

  <p>The <dfn id="attr-link-media" title="attr-link-media"><code>media</code></dfn>
  attribute says which media the resource applies to. The value must
  be a <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.</p>

  <div class="impl">

  <p>If the link is a <a href="links.html#hyperlink">hyperlink</a> then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is purely advisory,
  and describes for which media the document in question was
  designed.</p>

  <p>However, if the link is an <a href="links.html#external-resource-link">external resource link</a>,
  then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is
  prescriptive. The user agent must apply the external resource when
  the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute's value
  <a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
  conditions apply, and must not apply it otherwise.</p><!-- note
  similar text in <style> section -->

  <p class="note">The external resource might have further
  restrictions defined within that limit its applicability. For
  example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
  such further restrictions or requirements.</p><!-- note similar text
  in <style> section -->

  </div>

  <p id="default-media">The default, if the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
  media.</p>

  <p>The <dfn id="attr-link-hreflang" title="attr-link-hreflang"><code>hreflang</code></dfn>
  attribute on the <code><a href="#the-link-element">link</a></code> element has the same semantics as
  the <a href="links.html#attr-hyperlink-hreflang" title="attr-hyperlink-hreflang"><code>hreflang</code>
  attribute on <code>a</code> and <code>area</code>
  elements</a>.</p>

  <p>The <dfn id="attr-link-type" title="attr-link-type"><code>type</code></dfn> attribute
  gives the <a href="infrastructure.html#mime-type">MIME type</a> of the linked resource. It is
  purely advisory.  The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME
  type</a>.</p>

  <p>For <a href="links.html#external-resource-link" title="external resource link">external resource
  links</a>, the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute
  is used as a hint to user agents so that they can avoid fetching
  resources they do not support. <span class="impl">If the attribute
  is present, then the user agent must assume that the resource is of
  the given type (even if that is not a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>,
  e.g. the empty string). If the attribute is omitted, but the
  external resource link type has a default type defined, then the
  user agent must assume that the resource is of that type. If the UA
  does not support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
  relationship, then the UA should not <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource; if the UA
  does support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
  relationship, then the UA should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource at the
  appropriate time as specified for the <a href="links.html#external-resource-link">external resource
  link</a>'s particular type. If the attribute is omitted, and the
  external resource link type does not have a default type defined,
  but the user agent would <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource if the type
  was known and supported, then the user agent should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource under the
  assumption that it will be supported.</span></p>

  <div class="impl">

  <p>User agents must not consider the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute authoritative &#8212;
  upon fetching the resource, user agents must not use the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute to determine its actual
  type. Only the actual type (as defined in the next paragraph) is
  used to determine whether to <em>apply</em> the resource, not the
  aforementioned assumed type.</p>

  <p id="concept-link-type-sniffing">If the external resource link
  type defines rules for processing the resource's <a href="urls.html#content-type" title="Content-Type">Content-Type metadata</a>, then those rules
  apply. Otherwise, if the resource is expected to be an image, user
  agents may apply the <a href="urls.html#content-type-sniffing:-image" title="Content-Type sniffing:
  image">image sniffing rules</a>, with the <var title="">official
  type</var> being the type determined from the resource's <a href="urls.html#content-type" title="Content-Type">Content-Type metadata</a>, and use the
  resulting sniffed type of the resource as if it was the actual
  type. Otherwise, if neither of these conditions apply or if the user
  agent opts not to apply the image sniffing rules, then the user
  agent must use the resource's <a href="urls.html#content-type" title="Content-Type">Content-Type metadata</a> to determine the
  type of the resource. If there is no type metadata, but the external
  resource link type has a default type defined, then the user agent
  must assume that the resource is of that type.</p>

  <p class="note">The <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code>
  link type defines rules for processing the resource's <a href="urls.html#content-type" title="Content-Type">Content-Type metadata</a>.</p>

  <p>Once the user agent has established the type of the resource, the
  user agent must apply the resource if it is of a supported type and
  the other relevant conditions apply, and must ignore the resource
  otherwise.</p>

  <div class="example">

   <p>If a document contains style sheet links labeled as follows:</p>

   <pre>&lt;link rel="stylesheet" href="A" type="text/plain"&gt;
&lt;link rel="stylesheet" href="B" type="text/css"&gt;
&lt;link rel="stylesheet" href="C"&gt;</pre>

   <p>...then a compliant UA that supported only CSS style sheets
   would fetch the B and C files, and skip the A file (since
   <code>text/plain</code> is not the <a href="infrastructure.html#mime-type">MIME type</a> for CSS style
   sheets).</p>

   <p>For files B and C, it would then check the actual types returned
   by the server. For those that are sent as <code>text/css</code>, it
   would apply the styles, but for those labeled as
   <code>text/plain</code>, or any other type, it would not.</p>

   <p>If one of the two files was returned without a
   <a href="urls.html#content-type">Content-Type</a> metadata, or with a syntactically
   incorrect type like <code title="">Content-Type:&#160;"null"</code>, then the default type
   for <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> links would kick
   in. Since that default type is <code title="">text/css</code>, the
   style sheet <em>would</em> nonetheless be applied.</p>

  </div>

  </div>

  <p>The <dfn id="attr-link-title" title="attr-link-title"><code>title</code></dfn>
  attribute gives the title of the link. With one exception, it is
  purely advisory. The value is text. The exception is for style sheet
  links, where the <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
  attribute defines <a href="infrastructure.html#alternative-style-sheet-sets">alternative style sheet sets</a>.</p>

  <p class="note">The <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
  attribute on <code><a href="#the-link-element">link</a></code> elements differs from the global
  <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute of most other
  elements in that a link without a title does not inherit the title
  of the parent element: it merely has no title.</p>

  <p>The <code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code> attribute is used
  with the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> link type. The attribute
  must not be specified on <code><a href="#the-link-element">link</a></code> elements that do not have
  a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute that specifies
  the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> keyword.</p>

  <div class="impl">

  <!--!--><!-- s/header fields/headers/ for consistency with the rest of the spec -->

  <p>HTTP <code title="http-link">Link:</code> header fields, if
  supported, must be assumed to come before any links in the document,
  in the order that they were given in the HTTP message. These header
  fields are to be processed according to the rules given in the
  relevant specifications. <a href="references.html#refsHTTP">[HTTP]</a> <a href="references.html#refsWEBLINK">[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
  header -->

  <p class="note">Registration of relation types in HTTP Link: header
  fields is distinct from <a href="links.html#linkTypes">HTML link types</a>,
  and thus their semantics can be different from same-named HTML
  types.</p>

  <p>The IDL attributes <dfn id="dom-link-href" title="dom-link-href"><code>href</code></dfn>, <dfn id="dom-link-rel" title="dom-link-rel"><code>rel</code></dfn>, <dfn id="dom-link-media" title="dom-link-media"><code>media</code></dfn>, <dfn id="dom-link-hreflang" title="dom-link-hreflang"><code>hreflang</code></dfn>, <dfn id="dom-link-type" title="dom-link-type"><code>type</code></dfn>, and <dfn id="dom-link-sizes" title="dom-link-sizes"><code>sizes</code></dfn> each 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-link-rellist" title="dom-link-rellist"><code>relList</code></dfn> <span class="impl">must</span> <a href="common-dom-interfaces.html#reflect" title="reflect">reflect</a> the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> content attribute.</p>

  </div>

  <p>The IDL attribute <dfn id="dom-link-disabled" title="dom-link-disabled"><code>disabled</code></dfn> only applies
  to style sheet links. When the <code><a href="#the-link-element">link</a></code> element defines a
  style sheet link, then the <code title="dom-link-disabled"><a href="#dom-link-disabled">disabled</a></code> attribute behaves as
  defined <a href="styling.html#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative
  style sheets DOM</a>. For all other <code><a href="#the-link-element">link</a></code> elements it
  always return false and does nothing on setting.</p> <!-- that is
  normatively required in the definition of dom-linkstyle-disabled -->

  <p>The <code><a href="infrastructure.html#linkstyle">LinkStyle</a></code> interface is also implemented by
  this element; the <a href="styling.html#styling">styling processing model</a> defines
  how. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <div class="example">

   <p>Here, a set of <code><a href="#the-link-element">link</a></code> elements provide some style
   sheets:</p>

   <pre>&lt;!-- a persistent style sheet --&gt;
&lt;link rel="stylesheet" href="default.css"&gt;

&lt;!-- the preferred alternate style sheet --&gt;
&lt;link rel="stylesheet" href="green.css" title="Green styles"&gt;

&lt;!-- some alternate style sheets --&gt;
&lt;link rel="alternate stylesheet" href="contrast.css" title="High contrast"&gt;
&lt;link rel="alternate stylesheet" href="big.css" title="Big fonts"&gt;
&lt;link rel="alternate stylesheet" href="wide.css" title="Wide screen"&gt;</pre>

  </div>

  <div class="example">

   <p>The following example shows how you can specify versions of the
   page that use alternative formats, are aimed at other languages,
   and that are intended for other media:</p>

   <pre>&lt;link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"&gt;
&lt;link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"&gt;
&lt;link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"&gt;
&lt;link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"&gt;
&lt;link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"&gt;
&lt;link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"&gt;</pre>

  </div>





  </body></html>
--- NEW FILE: the-optgroup-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.11 The optgroup element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-datalist-element.html" title="4.10.10 The datalist element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-option-element.html" title="4.10.12 The option 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-datalist-element.html">&#8592; 4.10.10 The datalist element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-option-element.html">4.10.12 The option element &#8594;</a>
  </div>

  <h4 id="the-optgroup-element"><span class="secno">4.10.11 </span>The <dfn><code>optgroup</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>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Zero or more <code><a href="the-option-element.html#the-option-element">option</a></code> elements.</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-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code></dd>
   <dd><code title="attr-optgroup-label"><a href="#attr-optgroup-label">label</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="htmloptgroupelement">HTMLOptGroupElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-optgroup-disabled" title="dom-optgroup-disabled">disabled</a>;
           attribute DOMString <a href="#dom-optgroup-label" title="dom-optgroup-label">label</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><!-- v2: make optgroups selectable if they have a value. --><p>The <code><a href="#the-optgroup-element">optgroup</a></code> element <a href="rendering.html#represents">represents</a> a group of
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements with a common label.</p>

  <p>The element's group of <code><a href="the-option-element.html#the-option-element">option</a></code> elements consists of
  the <code><a href="the-option-element.html#the-option-element">option</a></code> elements that are children of the
  <code><a href="#the-optgroup-element">optgroup</a></code> element.</p>

  <div class="impl">

  <p>When showing <code><a href="the-option-element.html#the-option-element">option</a></code> elements in <code><a href="the-select-element.html#the-select-element">select</a></code>
  elements, user agents should show the <code><a href="the-option-element.html#the-option-element">option</a></code> elements
  of such groups as being related to each other and separate from
  other <code><a href="the-option-element.html#the-option-element">option</a></code> elements.</p>

  </div>

  <p>The <dfn id="attr-optgroup-disabled" title="attr-optgroup-disabled"><code>disabled</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> and can be used to <a href="the-option-element.html#concept-option-disabled" title="concept-option-disabled">disable</a> a group of
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements together.</p>

  <p>The <dfn id="attr-optgroup-label" title="attr-optgroup-label"><code>label</code></dfn>
  attribute must be specified. Its value gives the name of the group,
  for the purposes of the user interface. <span class="impl">User
  agents should use this attribute's value when labelling the group of
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements in a <code><a href="the-select-element.html#the-select-element">select</a></code>
  element.</span></p>

  <div class="impl">

  <p>The <dfn id="dom-optgroup-disabled" title="dom-optgroup-disabled"><code>disabled</code></dfn> and <dfn id="dom-optgroup-label" title="dom-optgroup-label"><code>label</code></dfn> attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class="example">

   <p>The following snippet shows how a set of lessons from three
   courses could be offered in a <code><a href="the-select-element.html#the-select-element">select</a></code> drop-down
   widget:</p>

   <pre>&lt;form action="courseselector.dll" method="get"&gt;
 &lt;p&gt;Which course would you like to watch today?
 &lt;p&gt;&lt;label&gt;Course:
  &lt;select name="c"&gt;
   &lt;optgroup label="8.01 Physics I: Classical Mechanics"&gt;
    &lt;option value="8.01.1"&gt;Lecture 01: Powers of Ten
    &lt;option value="8.01.2"&gt;Lecture 02: 1D Kinematics
    &lt;option value="8.01.3"&gt;Lecture 03: Vectors
   &lt;optgroup label="8.02 Electricity and Magnestism"&gt;
    &lt;option value="8.02.1"&gt;Lecture 01: What holds our world together?
    &lt;option value="8.02.2"&gt;Lecture 02: Electric Field
    &lt;option value="8.02.3"&gt;Lecture 03: Electric Flux
   &lt;optgroup label="8.03 Physics III: Vibrations and Waves"&gt;
    &lt;option value="8.03.1"&gt;Lecture 01: Periodic Phenomenon
    &lt;option value="8.03.2"&gt;Lecture 02: Beats
    &lt;option value="8.03.3"&gt;Lecture 03: Forced Oscillations with Damping
  &lt;/select&gt;
 &lt;/label&gt;
 &lt;p&gt;&lt;input type=submit value="&#9654; Play"&gt;
&lt;/form&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: the-param-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.5 The param element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-object-element.html" title="4.8.4 The object element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-video-element.html" title="4.8.6 The video 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-object-element.html">&#8592; 4.8.4 The object element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-video-element.html">4.8.6 The video element &#8594;</a>
  </div>

  <h4 id="the-param-element"><span class="secno">4.8.5 </span>The <dfn><code>param</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 an <code><a href="the-object-element.html#the-object-element">object</a></code> element, before any <a href="content-models.html#flow-content-1">flow content</a>.</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-param-name"><a href="#attr-param-name">name</a></code></dd>
   <dd><code title="attr-param-value"><a href="#attr-param-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">interface <dfn id="htmlparamelement">HTMLParamElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-param-name" title="dom-param-name">name</a>;
           attribute DOMString <a href="#dom-param-value" title="dom-param-value">value</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-param-element">param</a></code> element defines parameters for plugins
  invoked by <code><a href="the-object-element.html#the-object-element">object</a></code> elements. It does not <a href="rendering.html#represents" title="represents">represent</a> anything on its own.</p>

  <p>The <dfn id="attr-param-name" title="attr-param-name"><code>name</code></dfn>
  attribute gives the name of the parameter.</p>

  <p>The <dfn id="attr-param-value" title="attr-param-value"><code>value</code></dfn>
  attribute gives the value of the parameter.</p>

  <p>Both attributes must be present. They may have any value.</p>

  <div class="impl">

  <p>If both attributes are present, and if the parent element of the
  <code><a href="#the-param-element">param</a></code> is an <code><a href="the-object-element.html#the-object-element">object</a></code> element, then the
  element defines a <dfn id="concept-param-parameter" title="concept-param-parameter">parameter</dfn> with the given
  name-value pair.</p>

  <p>If either the name or value of a <a href="#concept-param-parameter" title="concept-param-parameter">parameter</a> defined by a
  <code><a href="#the-param-element">param</a></code> element that is the child of an
  <code><a href="the-object-element.html#the-object-element">object</a></code> element that <a href="rendering.html#represents">represents</a> an
  instantiated <a href="infrastructure.html#plugin">plugin</a> changes, and if that
  <a href="infrastructure.html#plugin">plugin</a> is communicating with the user agent using an
  API that features the ability to update the <a href="infrastructure.html#plugin">plugin</a> when
  the name or value of a <a href="#concept-param-parameter" title="concept-param-parameter">parameter</a> so changes, then
  the user agent must appropriately exercise that ability to notify
  the <a href="infrastructure.html#plugin">plugin</a> of the change.</p>

  <p>The IDL attributes <dfn id="dom-param-name" title="dom-param-name"><code>name</code></dfn> and <dfn id="dom-param-value" title="dom-param-value"><code>value</code></dfn> must both
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  </div>

  <div class="example">

   <p>The following example shows how the <code><a href="#the-param-element">param</a></code> element
   can be used to pass a parameter to a plugin, in this case the O3D
   plugin.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;title&gt;O3D Utah Teapot&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;p&gt;
    &lt;object type="application/vnd.o3d.auto"&gt;
     <strong>&lt;param name="o3d_features" value="FloatingPointTextures"&gt;</strong>
     &lt;img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting."&gt;
     &lt;p&gt;To see the teapot actually rendered by O3D on your
     computer, please download and install the &lt;a
     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install"&gt;O3D plugin&lt;/a&gt;.&lt;/p&gt;
    &lt;/object&gt;
    &lt;script src="o3d-teapot.js"&gt;&lt;/script&gt;
   &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>


<!--TOPIC:Video and Audio-->
  </body></html>
--- NEW FILE: the-time-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.10 The time element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-abbr-element.html" title="4.6.9 The abbr element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-code-element.html" title="4.6.11 The code 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-abbr-element.html">&#8592; 4.6.9 The abbr element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-code-element.html">4.6.11 The code element &#8594;</a>
  </div>

  <h4 id="the-time-element"><span class="secno">4.6.10 </span>The <dfn><code>time</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><code title="attr-time-datetime"><a href="#attr-time-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>
<pre class="idl">interface <dfn id="htmltimeelement">HTMLTimeElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-time-datetime" title="dom-time-datetime">datetime</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-time-element">time</a></code> element <a href="rendering.html#represents">represents</a> its
  contents, along with a machine-readable form of those contents in
  the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute. The
  kind of content is limited to various kinds of dates, times,
  time-zone offsets, and durations, as described below.</p>

  <p>The <dfn id="attr-time-datetime" title="attr-time-datetime"><code>datetime</code></dfn>
  attribute may be present. If present, its value must be a
  representation of the element's contents in a machine-readable
  format.</p>

  <p>A <code><a href="#the-time-element">time</a></code> element that does not have a <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> content attribute must
  not have any element descendants.</p>

  <p>The <dfn id="datetime-value">datetime value</dfn> of a <code><a href="#the-time-element">time</a></code> element is
  the value of the element's <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> content attribute, if
  it has one, or the element's <code><a href="infrastructure.html#textcontent">textContent</a></code>, if it does
  not.</p>

  <p>The <a href="#datetime-value">datetime value</a> of a <code><a href="#the-time-element">time</a></code> element
  must match one of the following syntaxes.</p>

  <dl><dt>A <a href="common-microsyntaxes.html#valid-month-string">valid month string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;2011-11&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-date-string">valid date string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;2011-11-12&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-yearless-date-string">valid yearless date string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;11-12&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-time-string">valid time string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;14:54&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;14:54:39&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;14:54:39.92922&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and time string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;2011-11-12T14:54&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39.92922&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39.92922&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-time-zone-offset-string">valid time-zone offset string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;Z&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;+0000&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;+00:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;-0800&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;-08:00&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;2011-11-12T14:54Z&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39Z&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39.92922Z&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12T14:54+0000&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39+0000&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39.92922+0000&lt;/time&gt;</pre> 

    <pre class="example">&lt;time&gt;2011-11-12T14:54+00:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39+00:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T14:54:39.92922+00:00&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12T06:54-0800&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T06:54:39-0800&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T06:54:39.92922-0800&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12T06:54-08:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T06:54:39-08:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12T06:54:39.92922-08:00&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12 14:54Z&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39Z&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39.92922Z&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12 14:54+0000&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39+0000&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39.92922+0000&lt;/time&gt;</pre> 

    <pre class="example">&lt;time&gt;2011-11-12 14:54+00:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39+00:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 14:54:39.92922+00:00&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12 06:54-0800&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 06:54:39-0800&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 06:54:39.92922-0800&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;2011-11-12 06:54-08:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 06:54:39-08:00&lt;/time&gt;</pre>
    <pre class="example">&lt;time&gt;2011-11-12 06:54:39.92922-08:00&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-week-string">valid week string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;2011-W46&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a> representing a year</dt>

   <dd>

    <pre class="example">&lt;time&gt;2011&lt;/time&gt;</pre>

   </dd>


   <dt>A <a href="common-microsyntaxes.html#valid-duration-string">valid duration string</a></dt>

   <dd>

    <pre class="example">&lt;time&gt;PT4H18M3S&lt;/time&gt;</pre>

    <pre class="example">&lt;time&gt;4h 18m 3s&lt;/time&gt;</pre>

   </dd>

  </dl><div class="impl">

  <p>The machine-readable equivalent of the element's contents must be
  obtained from the element's <a href="#datetime-value">datetime value</a> by using the
  following algorithm:</p>

  <ol><li><p>If <a href="common-microsyntaxes.html#parse-a-month-string" title="parse a month string">parsing a month
   string</a> from the element's <a href="#datetime-value">datetime value</a>
   returns a <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-date-string" title="parse a date string">parsing a date
   string</a> from the element's <a href="#datetime-value">datetime value</a>
   returns a <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-yearless-date-string" title="parse a yearless date string">parsing a
   yearless date string</a> from the element's <a href="#datetime-value">datetime
   value</a> returns a <a href="common-microsyntaxes.html#concept-yearless-date" title="concept-yearless-date">yearless date</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-time-string" title="parse a time string">parsing a time
   string</a> from the element's <a href="#datetime-value">datetime value</a>
   returns a <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-local-date-and-time-string" title="parse a local date and time string">parsing
   a local date and time string</a> from the element's
   <a href="#datetime-value">datetime value</a> returns a <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">local date and time</a>, that is
   the machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-time-zone-offset-string" title="parse a time-zone offset string">parsing a
   time-zone offset string</a> from the element's <a href="#datetime-value">datetime
   value</a> returns a <a href="common-microsyntaxes.html#concept-timezone" title="concept-timezone">time-zone
   offset</a>, that is the machine-readable equivalent; abort
   these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string" title="parse a global date and time
   string">parsing a global date and time string</a> from the
   element's <a href="#datetime-value">datetime value</a> returns a <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-week-string" title="parse a week string">parsing a week
   string</a> from the element's <a href="#datetime-value">datetime value</a>
   returns a <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a>, that is the
   machine-readable equivalent; abort these steps.</p></li>

   <li><p>If the element's <a href="#datetime-value">datetime value</a> consists of
   only characters in the range <a href="#ascii-digits">ASCII digits</a>, then the machine-readable equivalent is the base-ten
   interpretation of those digits, representing a year; abort these
   steps.</p></li>

   <li><p>If <a href="common-microsyntaxes.html#parse-a-duration-string" title="parse a duration string">parsing a duration
   string</a> from the element's <a href="#datetime-value">datetime value</a>
   returns a <a href="common-microsyntaxes.html#concept-duration" title="concept-duration">duration</a>, that is
   the machine-readable equivalent; abort these steps.</p></li>

   <li><p>There is no machine-readable equivalent.</p></li>

  </ol><p class="note">The algorithms referenced above are intended to be
  designed such that for any arbitrary string <var title="">s</var>,
  only one of the algorithms returns a value. A more efficient
  approach might be to create a single algorithm that parses all these
  data types in one pass; developing such an algorithm is left as an
  exercise to the reader.</p>

  <p>The <dfn id="dom-time-datetime" title="dom-time-datetime"><code>datetime</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

  </div>

  <div class="example">

   <p>The <code><a href="#the-time-element">time</a></code> element can be used to encode dates, for
   example in microformats. The following shows a hypothetical way of
   encoding an event using a variant on hCalendar that uses the
   <code><a href="#the-time-element">time</a></code> element:</p>

   <pre>&lt;div class="vevent"&gt;
 &lt;a class="url" href="http://www.web2con.com/"&gt;http://www.web2con.com/&lt;/a&gt;
  &lt;span class="summary"&gt;Web 2.0 Conference&lt;/span&gt;:
  &lt;time class="dtstart" datetime="2005-10-05"&gt;October 5&lt;/time&gt; -
  &lt;time class="dtend" datetime="2005-10-07"&gt;7&lt;/time&gt;,
  at the &lt;span class="location"&gt;Argent Hotel, San Francisco, CA&lt;/span&gt;
 &lt;/div&gt;</pre>

  </div>

  <div class="example">

   <p>Here, a fictional microdata vocabulary based on the Atom
   vocabulary is used with the <code><a href="#the-time-element">time</a></code> element to mark up a
   blog post's publication date.</p>

   <pre>&lt;article itemscope itemtype="http://n.example.org/rfc4287"&gt;
 &lt;h1 itemprop="title"&gt;Big tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time itemprop="published" datetime="2009-08-29"&gt;two days ago&lt;/time&gt;.&lt;/footer&gt;
 &lt;p itemprop="content"&gt;Today, I went out and bought a bike for my kid.&lt;/p&gt;
&lt;/article&gt;</pre>

  </div>

<!--FORK-->

  <div class="example">

   <p>In the following snippet, the <code><a href="#the-time-element">time</a></code> element is used
   to encode a date in the ISO8601 format, for later processing by a
   script:</p>

   <pre>&lt;p&gt;Our first date was &lt;time datetime="2006-09-23"&gt;a Saturday&lt;/time&gt;.&lt;/p&gt;</pre>

   <p>In this second snippet, the value includes a time:</p>

   <pre>&lt;p&gt;We stopped talking at &lt;time datetime="2006-09-24T05:00-07:00"&gt;5am the next morning&lt;/time&gt;.&lt;/p&gt;</pre>

   <p>A script loaded by the page (and thus privy to the page's
   internal convention of marking up dates and times using the
   <code><a href="#the-time-element">time</a></code> element) could scan through the page and look at
   all the <code><a href="#the-time-element">time</a></code> elements therein to create an index of
   dates and times.</p>

  </div>

  <div class="example">

   <p>For example, this element conveys the string "Tuesday" with
   the additional semantic that the 12th of November 2011 is the
   meaning that corresponds to "Tuesday":</p>

   <pre>Today is &lt;time datetime="2011-11-12"&gt;Tuesday&lt;/time&gt;.</pre>

  </div>

  <div class="example">

   <p>In this example, a specific time in the Pacific Standard Time
   timezone is specified:</p>

   <pre>Your next meeting is at &lt;time datetime="2011-11-12T15:00-08:00"&gt;3pm&lt;/time&gt;.</pre>

  </div>




  </body></html>
--- NEW FILE: mathml.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.15 MathML &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="image-maps.html" title="4.8.14 Image maps" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="dimension-attributes.html" title="4.8.17 Dimension attributes" 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="image-maps.html">&#8592; 4.8.14 Image maps</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="dimension-attributes.html">4.8.17 Dimension attributes &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="mathml.html#mathml"><span class="secno">4.8.15 </span>MathML</a></li><li><a href="mathml.html#svg"><span class="secno">4.8.16 </span>SVG</a></li></ol></li></ol></li></ol></div>

  <h4 id="mathml"><span class="secno">4.8.15 </span>MathML</h4>

  <p>The <dfn id="math"><code>math</code></dfn> element from the <a href="namespaces.html#mathml-namespace">MathML
  namespace</a> falls into the <a href="content-models.html#embedded-content-2">embedded content</a>,
  <a href="content-models.html#phrasing-content-1">phrasing content</a>, and <a href="content-models.html#flow-content-1">flow content</a>
  categories for the purposes of the content models in this
  specification.</p>

  <div class="impl">

  <!-- apparently we get to define error handling, so: -->

  <p>User agents must handle text other than <a href="content-models.html#inter-element-whitespace">inter-element
  whitespace</a> found in MathML elements whose content models do
  not allow straight text by pretending for the purposes of MathML
  content models, layout, and rendering that that text is actually
  wrapped in an <code title="">mtext</code> element in the
  <a href="namespaces.html#mathml-namespace">MathML namespace</a>. (Such text is not, however,
  conforming.)</p>

  <p>User agents must act as if any MathML element whose contents does
  not match the element's content model was replaced, for the purposes
  of MathML layout and rendering, by an <code title="">merror</code>
  element in the <a href="namespaces.html#mathml-namespace">MathML namespace</a> containing some
  appropriate error message.</p>

  <p>To enable authors to use MathML tools that only accept MathML in
  its XML form, interactive HTML user agents are encouraged to provide
  a way to export any MathML fragment as an XML namespace-well-formed
  XML fragment.</p>

  </div>

  <p>The semantics of MathML elements are defined by the MathML
  specification and <a href="infrastructure.html#other-applicable-specifications">other applicable specifications</a>. <a href="references.html#refsMATHML">[MATHML]</a></p>

  <div class="example">

   <p>Here is an example of the use of MathML in an HTML document:</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;The quadratic formula&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;The quadratic formula&lt;/h1&gt;
  &lt;p&gt;
   &lt;math&gt;
    &lt;mi&gt;x&lt;/mi&gt;
    &lt;mo&gt;=&lt;/mo&gt;
    &lt;mfrac&gt;
     &lt;mrow&gt;
      &lt;mo form="prefix"&gt;&#8722;&lt;/mo&gt; &lt;mi&gt;b&lt;/mi&gt;
      &lt;mo&gt;&#177;&lt;/mo&gt;
      &lt;msqrt&gt;
       &lt;msup&gt; &lt;mi&gt;b&lt;/mi&gt; &lt;mn&gt;2&lt;/mn&gt; &lt;/msup&gt;
       &lt;mo&gt;&#8722;&lt;/mo&gt;
       &lt;mn&gt;4&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;c&lt;/mi&gt;
      &lt;/msqrt&gt;
     &lt;/mrow&gt;
     &lt;mrow&gt;
      &lt;mn&gt;2&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt;
     &lt;/mrow&gt;
    &lt;/mfrac&gt;
   &lt;/math&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>



  <h4 id="svg"><span class="secno">4.8.16 </span>SVG</h4>

  <p>The <dfn id="svg-0"><code>svg</code></dfn> element from the <a href="namespaces.html#svg-namespace">SVG
  namespace</a> falls into the <a href="content-models.html#embedded-content-2">embedded content</a>,
  <a href="content-models.html#phrasing-content-1">phrasing content</a>, and <a href="content-models.html#flow-content-1">flow content</a>
  categories for the purposes of the content models in this
  specification.</p>

  <div class="impl">

  <p>To enable authors to use SVG tools that only accept SVG in its
  XML form, interactive HTML user agents are encouraged to provide a
  way to export any SVG fragment as an XML namespace-well-formed XML
  fragment.</p>

  </div>

  <p>When the SVG <code title="">foreignObject</code> element contains
  elements from the <a href="namespaces.html#html-namespace-0">HTML namespace</a>, such elements must
  all be <a href="content-models.html#flow-content-1">flow content</a>. <a href="references.html#refsSVG">[SVG]</a></p>

  <p>The content model for <code title="">title</code> elements in the
  <a href="namespaces.html#svg-namespace">SVG namespace</a> inside <a href="infrastructure.html#html-documents">HTML documents</a> is
  <a href="content-models.html#phrasing-content-1">phrasing content</a>. (This further constrains the
  requirements given in the SVG specification.)</p>

  <p>The semantics of SVG elements are defined by the SVG
  specification and <a href="infrastructure.html#other-applicable-specifications">other applicable specifications</a>. <a href="references.html#refsSVG">[SVG]</a></p>

  <!-- The following paragraph is for bug 7510 -->
  <p>The SVG specification includes requirements regarding the
  handling of elements in the DOM that are not in the SVG namespace,
  that are in SVG fragments, and that are not included in a
  <code title="">foreignObject</code> element. <em>This</em>
  specification does not define any processing for elements in SVG
  fragments that are not in the HTML namespace; they are considered
  neither conforming nor non-conforming from the perspective of this
  specification.</p>



  </body></html>
--- NEW FILE: the-var-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.12 The var element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-code-element.html" title="4.6.11 The code element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-samp-element.html" title="4.6.13 The samp 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-code-element.html">&#8592; 4.6.11 The code element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-samp-element.html">4.6.13 The samp element &#8594;</a>
  </div>

  <h4 id="the-var-element"><span class="secno">4.6.12 </span>The <dfn><code>var</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-var-element">var</a></code> element <a href="rendering.html#represents">represents</a> a variable.
  This could be an actual variable in a mathematical expression or
  programming context, an identifier representing a constant, a symbol
  identifying a physical quantity, a function parameter, or just be a
  term used as a placeholder in prose.</p>

  <div class="example">
   <p>In the paragraph below, the letter "n" is being used as a
   variable in prose:</p>
   <pre>&lt;p&gt;If there are &lt;var&gt;n&lt;/var&gt; pipes leading to the ice
cream factory then I expect at &lt;em&gt;least&lt;/em&gt; &lt;var&gt;n&lt;/var&gt;
flavors of ice cream to be available for purchase!&lt;/p&gt;</pre>
  </div>

  <p>For mathematics, in particular for anything beyond the simplest
  of expressions, MathML is more appropriate. However, the
  <code><a href="#the-var-element">var</a></code> element can still be used to refer to specific
  variables that are then mentioned in MathML expressions.</p>

  <div class="example">

   <p>In this example, an equation is shown, with a legend that
   references the variables in the equation. The expression itself is
   marked up with MathML, but the variables are mentioned in the
   figure's legend using <code><a href="#the-var-element">var</a></code>.</p>

   <pre>&lt;figure&gt;
 &lt;math&gt;
  &lt;mi&gt;a&lt;/mi&gt;
  &lt;mo&gt;=&lt;/mo&gt;
  &lt;msqrt&gt;
   &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
   &lt;mi&gt;+&lt;/mi&gt;
   &lt;msup&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
  &lt;/msqrt&gt;
 &lt;/math&gt;
 &lt;figcaption&gt;
  Using Pythagoras' theorem to solve for the hypotenuse &lt;var&gt;a&lt;/var&gt; of
  a triangle with sides &lt;var&gt;b&lt;/var&gt; and &lt;var&gt;c&lt;/var&gt;
 &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>

  <div class="example">

   <p>Here, the equation describing mass-energy equivalence is used in
   a sentence, and the <code><a href="#the-var-element">var</a></code> element is used to mark the
   variables and constants in that equation:</p>

   <pre>&lt;p&gt;Then he turned to the blackboard and picked up the chalk. After a few moment's
thought, he wrote &lt;var&gt;E&lt;/var&gt; = &lt;var&gt;m&lt;/var&gt; &lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;. The teacher
looked pleased.&lt;/p&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-th-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.10 The th element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-td-element.html" title="4.9.9 The td element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="attributes-common-to-td-and-th-elements.html" title="4.9.11 Attributes common to td and th 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-td-element.html">&#8592; 4.9.9 The td element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="attributes-common-to-td-and-th-elements.html">4.9.11 Attributes common to td and th elements &#8594;</a>
  </div>

  <h4 id="the-th-element"><span class="secno">4.9.10 </span>The <dfn><code>th</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-tr-element.html#the-tr-element">tr</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>, 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>
   <!-- EDITING NOTE: If you remove 'heading content' from the list above, make sure to fix the definition of 'sectioning root' to include <th> -->
   <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-tdth-colspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-colspan">colspan</a></code></dd>
   <dd><code title="attr-tdth-rowspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-rowspan">rowspan</a></code></dd>
   <dd><code title="attr-tdth-headers"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-headers">headers</a></code></dd>
   <dd><code title="attr-th-scope"><a href="#attr-th-scope">scope</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="htmltableheadercellelement">HTMLTableHeaderCellElement</dfn> : <a href="attributes-common-to-td-and-th-elements.html#htmltablecellelement">HTMLTableCellElement</a> {
           attribute DOMString <a href="#dom-th-scope" title="dom-th-scope">scope</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-th-element">th</a></code> element <a href="rendering.html#represents">represents</a> a header <a href="attributes-common-to-td-and-th-elements.html#concept-cell" title="concept-cell">cell</a> in a table.</p>

  <p>The <code><a href="#the-th-element">th</a></code> element may have a <dfn id="attr-th-scope" title="attr-th-scope"><code>scope</code></dfn> content attribute
  specified. The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute is
  an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with five states, four of which
  have explicit keywords:</p>

  <dl><dt>The <dfn id="attr-th-scope-row" title="attr-th-scope-row"><code>row</code></dfn>
   keyword, which maps to the <i>row</i> state</dt>

   <dd>The <i>row</i> state means the header cell applies to some of
   the subsequent cells in the same row(s).</dd>

   <dt>The <dfn id="attr-th-scope-col" title="attr-th-scope-col"><code>col</code></dfn>
   keyword, which maps to the <i>column</i> state</dt>

   <dd>The <i>column</i> state means the header cell applies to some
   of the subsequent cells in the same column(s).</dd>

   <dt>The <dfn id="attr-th-scope-rowgroup" title="attr-th-scope-rowgroup"><code>rowgroup</code></dfn> keyword,
   which maps to the <i>row group</i> state</dt>

   <dd>The <i>row group</i> state means the header cell applies to all
   the remaining cells in the row group. A <code><a href="#the-th-element">th</a></code> element's
   <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must not be in
   the <a href="#attr-th-scope-rowgroup" title="attr-th-scope-rowgroup">row group</a> state if
   the element is not anchored in a <a href="attributes-common-to-td-and-th-elements.html#concept-row-group" title="concept-row-group">row group</a>.</dd>

   <dt>The <dfn id="attr-th-scope-colgroup" title="attr-th-scope-colgroup"><code>colgroup</code></dfn> keyword,
   which maps to the <i>column group</i> state</dt>

   <dd>The <i>column group</i> state means the header cell applies to
   all the remaining cells in the column group. A <code><a href="#the-th-element">th</a></code>
   element's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must
   not be in the <a href="#attr-th-scope-colgroup" title="attr-th-scope-colgroup">column
   group</a> state if the element is not anchored in a <a href="attributes-common-to-td-and-th-elements.html#concept-column-group" title="concept-column-group">column group</a>.</dd>

   <dt>The <dfn id="attr-th-scope-auto" title="attr-th-scope-auto">auto</dfn> state</dt>

   <dd>The <i>auto</i> state makes the header cell apply to a set of
   cells selected based on context.</dd>

  </dl><p>The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute's
  <i>missing value default</i> is the <i>auto</i> state.</p>

  <div class="impl">

  <p>The <code><a href="#the-th-element">th</a></code> element and its <code title="attr-tdth-colspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-colspan">colspan</a></code>, <code title="attr-tdth-rowspan"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-rowspan">rowspan</a></code>, <code title="attr-tdth-headers"><a href="attributes-common-to-td-and-th-elements.html#attr-tdth-headers">headers</a></code>, and <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attributes take part in the
  <a href="attributes-common-to-td-and-th-elements.html#table-model">table model</a>.</p>

  <p>The <dfn id="dom-th-scope" title="dom-th-scope"><code>scope</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  </div>

  <div class="example">

   <p>The following example shows how the <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute's <code title="attr-th-scope-rowgroup"><a href="#attr-th-scope-rowgroup">rowgroup</a></code> value affects which
   data cells a header cell applies to.</p>

   <p>Here is a markup fragment showing a table:</p>

   <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; ID &lt;th&gt; Measurement &lt;th&gt; Average &lt;th&gt; Maximum
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; Cats &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 93 &lt;th scope=row&gt; Legs &lt;td&gt; 3.5 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 10 &lt;th scope=row&gt; Tails &lt;td&gt; 1 &lt;td&gt; 1
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; English speakers &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 32 &lt;th scope=row&gt; Legs &lt;td&gt; 2.67 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 35 &lt;th scope=row&gt; Tails &lt;td&gt; 0.33 &lt;td&gt; 1
&lt;/table&gt;</pre>

   <p>This would result in the following table:</p>

   <table><thead><tr><th> ID </th><th> Measurement </th><th> Average </th><th> Maximum
    </th></tr></thead><tbody><tr><td> </td><th scope="rowgroup"> Cats </th><td> </td><td>
     </td></tr><tr><td> 93 </td><th scope="row"> Legs </th><td> 3.5 </td><td> 4
     </td></tr><tr><td> 10 </td><th scope="row"> Tails </th><td> 1 </td><td> 1
    </td></tr></tbody><tbody><tr><td> </td><th scope="rowgroup"> English speakers </th><td> </td><td>
     </td></tr><tr><td> 32 </td><th scope="row"> Legs </th><td> 2.67 </td><td> 4
     </td></tr><tr><td> 35 </td><th scope="row"> Tails </th><td> 0.33 </td><td> 1
   </td></tr></tbody></table><p>The headers in the first row all apply directly down to the rows
   in their column.</p>

   <p>The headers with the explicit <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attributes apply to all the
   cells in their row group other than the cells in the first column.</p>

   <p>The remaining headers apply just to the cells to the right of
   them.</p>

   <!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
   <img alt="" height="256" src="images/table-scope-diagram.png" width="459"><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>



  </body></html>
--- NEW FILE: tokenization.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>8.2.4 Tokenization &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...6224 lines suppressed...]
     elements</a> until <var title="">node</var> has been popped
     from the stack, and then abort these steps.</p></li>

     <li><p>Set <var title="">node</var> to the previous entry in the
     <a href="parsing.html#stack-of-open-elements">stack of open elements</a>.</p></li>

     <li><p>If <var title="">node</var> is not an element in the
     <a href="namespaces.html#html-namespace-0">HTML namespace</a>, return to the step labeled
     <i>loop</i>.</p></li>

     <li><p>Otherwise, process the token according to the rules given
     in the section corresponding to the current <a href="parsing.html#insertion-mode">insertion
     mode</a> in HTML content.</p></li>

    </ol></dd>

  </dl></div>


  </body></html>
--- NEW FILE: requirements-relating-to-bidirectional-algorithm-formatting-characters.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.2.6 Requirements relating to bidirectional-algorithm formatting characters &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="content-models.html" title="3.2.5 Content models" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="wai-aria.html" title="3.2.7 WAI-ARIA" 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="content-models.html">&#8592; 3.2.5 Content models</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="wai-aria.html">3.2.7 WAI-ARIA &#8594;</a>
  </div>

  <h4 id="requirements-relating-to-bidirectional-algorithm-formatting-characters"><span class="secno">3.2.6 </span>Requirements relating to bidirectional-algorithm formatting
  characters</h4>

  <p><a href="content-models.html#text-content">Text content</a> in <a href="infrastructure.html#html-elements">HTML elements</a> with
  child <code><a href="infrastructure.html#text-0">Text</a></code> nodes, and text in attributes of <a href="infrastructure.html#html-elements">HTML
  elements</a> that allow free-form text, may contain characters in
  the range U+202A to U+202E (the bidirectional-algorithm formatting
  characters). However, the use of these characters is restricted so
  that any embedding or overrides generated by these characters do not
  start and end with different parent elements, and so that all such
  embeddings and overrides are explicitly terminated by a U+202C POP
  DIRECTIONAL FORMATTING character. This helps reduce incidences of
  text being reused in a manner that has unforeseen effects on the
  bidirectional algorithm. <a href="references.html#refsBIDI">[BIDI]</a></p>

  <p>The aforementioned restrictions are defined by specifying that
  certain parts of documents form <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm
  formatting character ranges</a>, and then imposing a requirement
  on such ranges.</p>

  <p>The strings resulting from applying the following algorithm to an
  <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> <var title="">element</var> are <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting
  character ranges</a>:</p>

  <ol><li><p>Let <var title="">output</var> be an empty list of strings.</p></li>

   <li><p>Let <var title="">string</var> be an empty string.</p></li>

   <li><p>Let <var title="">node</var> be the first child node of <var title="">element</var>, if any, or null otherwise.</p></li>

   <!-- while node != null do -->
   <li><p><i>Loop</i>: If <var title="">node</var> is null, jump to
   the step labeled <i>end</i>.</p></li>

   <li>

    <p>Process <var title="">node</var> according to the first
    matching step from the following list:</p>

    <dl class="switch"><dt>If <var title="">node</var> is a <code><a href="infrastructure.html#text-0">Text</a></code> node</dt>

     <dd><p>Append the text data of <var title="">node</var> to <var title="">string</var>.</p></dd>


     <dt>If <var title="">node</var> is a <code><a href="the-br-element.html#the-br-element">br</a></code> element</dt>
     <dt>If <var title="">node</var> is an <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> that is <a href="content-models.html#flow-content-1">flow content</a> but that is not also <a href="content-models.html#phrasing-content-1">phrasing content</a></dt>

     <dd><p>If <var title="">string</var> is not the empty string,
     push <var title="">string</var> onto <var title="">output</var>,
     and let <var title="">string</var> be empty string.</p></dd>


     <dt>Otherwise</dt>

     <dd>Do nothing.</dd>

    </dl></li>

   <li><p>Let <var title="">node</var> be <var title="">node</var>'s
   next sibling, if any, or null otherwise.</p></li>

   <li><p>Jump to the step labeled <i>loop</i>.</p></li>
   <!-- end while -->

   <li><p><i>End</i>: If <var title="">string</var> is not the empty
   string, push <var title="">string</var> onto <var title="">output</var>.</p></li>

   <li><p>Return <var title="">output</var> as the
   <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting character
   ranges</a>.</p></li>

  </ol><p>The value of a namespace-less attribute of an <a href="infrastructure.html#html-elements" title="HTML
  elements">HTML element</a> is a <a href="#bidirectional-algorithm-formatting-character-ranges" title="bidirectional-algorithm formatting character
  ranges">bidirectional-algorithm formatting character
  range</a>.</p>

<!--(this is unnecessarily pedantic)
  <p>The text data of a comment node is a <span
  title="bidirectional-algorithm formatting character
  ranges">bidirectional-algorithm formatting character
  range</span>.</p>
-->

  <p>Any strings that, as described above, are
  <dfn id="bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting character ranges</dfn> must
  match the <code title="">string</code> production in the following
  ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p>

  <pre>string        = *( plaintext ( embedding / override ) ) plaintext
embedding     = ( lre / rle ) string pdf
override      = ( lro / rlo ) string pdf
lre           = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
rle           = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
lro           = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
rlo           = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
pdf           = %x202C ; U+202C POP DIRECTIONAL FORMATTING
plaintext     = *( %x0000-2029 / %x202F-10FFFF )
                ; any string with no bidirectional-algorithm formatting characters</pre>

  <p class="note">Authors are encouraged to use the <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> attribute, the <code><a href="the-bdo-element.html#the-bdo-element">bdo</a></code> element,
  and the <code><a href="the-bdi-element.html#the-bdi-element">bdi</a></code> element, rather than maintaining the
  bidirectional-algorithm formatting characters manually. The
  bidirectional-algorithm formatting characters interact poorly with
  CSS.</p>



  </body></html>
--- NEW FILE: the-body-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.1 The body element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="sections.html" title="4.4 Sections" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-section-element.html" title="4.4.2 The section 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="sections.html">&#8592; 4.4 Sections</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-section-element.html">4.4.2 The section element &#8594;</a>
  </div>

  <h4 id="the-body-element"><span class="secno">4.4.1 </span>The <dfn><code>body</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="headings-and-sections.html#sectioning-root">Sectioning root</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 the second 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><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="handler-window-onafterprint"><a href="webappapis.html#handler-window-onafterprint">onafterprint</a></code></dd>
   <dd><code title="handler-window-onbeforeprint"><a href="webappapis.html#handler-window-onbeforeprint">onbeforeprint</a></code></dd>
   <dd><code title="handler-window-onbeforeunload"><a href="webappapis.html#handler-window-onbeforeunload">onbeforeunload</a></code></dd>
   <dd><code title="handler-window-onblur"><a href="webappapis.html#handler-window-onblur">onblur</a></code></dd>
   <dd><code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code></dd>
   <dd><code title="handler-window-onfocus"><a href="webappapis.html#handler-window-onfocus">onfocus</a></code></dd>
   <dd><code title="handler-window-onhashchange"><a href="webappapis.html#handler-window-onhashchange">onhashchange</a></code></dd>
   <dd><code title="handler-window-onload"><a href="webappapis.html#handler-window-onload">onload</a></code></dd>
   <dd><code title="handler-window-onmessage"><a href="webappapis.html#handler-window-onmessage">onmessage</a></code></dd>
   <dd><code title="handler-window-onoffline"><a href="webappapis.html#handler-window-onoffline">onoffline</a></code></dd>
   <dd><code title="handler-window-ononline"><a href="webappapis.html#handler-window-ononline">ononline</a></code></dd>
   <dd><code title="handler-window-onpagehide"><a href="webappapis.html#handler-window-onpagehide">onpagehide</a></code></dd>
   <dd><code title="handler-window-onpageshow"><a href="webappapis.html#handler-window-onpageshow">onpageshow</a></code></dd>
   <dd><code title="handler-window-onpopstate"><a href="webappapis.html#handler-window-onpopstate">onpopstate</a></code></dd>
   <dd><code title="handler-window-onresize"><a href="webappapis.html#handler-window-onresize">onresize</a></code></dd>
   <dd><code title="handler-window-onscroll"><a href="webappapis.html#handler-window-onscroll">onscroll</a></code></dd>
   <dd><code title="handler-window-onstorage"><a href="webappapis.html#handler-window-onstorage">onstorage</a></code></dd>
   <dd><code title="handler-window-onunload"><a href="webappapis.html#handler-window-onunload">onunload</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="htmlbodyelement">HTMLBodyElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onafterprint" title="handler-window-onafterprint">onafterprint</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onbeforeprint" title="handler-window-onbeforeprint">onbeforeprint</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onbeforeunload" title="handler-window-onbeforeunload">onbeforeunload</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onblur" title="handler-window-onblur">onblur</a>;
           attribute <a href="webappapis.html#onerroreventhandler">OnErrorEventHandler</a> <a href="webappapis.html#handler-window-onerror" title="handler-window-onerror">onerror</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onfocus" title="handler-window-onfocus">onfocus</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onhashchange" title="handler-window-onhashchange">onhashchange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onload" title="handler-window-onload">onload</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onmessage" title="handler-window-onmessage">onmessage</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onoffline" title="handler-window-onoffline">onoffline</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-ononline" title="handler-window-ononline">ononline</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onpopstate" title="handler-window-onpopstate">onpopstate</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onpagehide" title="handler-window-onpagehide">onpagehide</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onpageshow" title="handler-window-onpageshow">onpageshow</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onresize" title="handler-window-onresize">onresize</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onscroll" title="handler-window-onscroll">onscroll</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onstorage" title="handler-window-onstorage">onstorage</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-window-onunload" title="handler-window-onunload">onunload</a>;
};</pre>
</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-body-element">body</a></code> element <a href="rendering.html#represents">represents</a> the main
  content of the document.</p>

  <p>In conforming documents, there is only one <code><a href="#the-body-element">body</a></code>
  element. The <code title="dom-document-body"><a href="dom.html#dom-document-body">document.body</a></code>
  IDL attribute provides scripts with easy access to a document's
  <code><a href="#the-body-element">body</a></code> element.</p>

  <div class="impl">

  <p class="note">Some DOM operations (for example, parts of the
  <a href="dnd.html#dnd">drag and drop</a> model) are defined in terms of "<a href="dom.html#the-body-element-0">the
  body element</a>". This refers to a particular element in the
  DOM, as per the definition of the term, and not any arbitrary
  <code><a href="#the-body-element">body</a></code> element.</p>

  </div>

  <p>The <code><a href="#the-body-element">body</a></code> element exposes as <a href="webappapis.html#event-handler-content-attributes">event handler
  content attributes</a> a number of the <a href="webappapis.html#event-handlers">event
  handlers</a> of the <code><a href="browsers.html#window">Window</a></code> object. It also mirrors
  their <a href="webappapis.html#event-handler-idl-attributes">event handler IDL attributes</a>.</p>

  <p>The <code title="handler-window-onblur"><a href="webappapis.html#handler-window-onblur">onblur</a></code>, <code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code>, <code title="handler-window-onfocus"><a href="webappapis.html#handler-window-onfocus">onfocus</a></code>, <code title="handler-window-onload"><a href="webappapis.html#handler-window-onload">onload</a></code>, and <code title="handler-window-onscroll"><a href="webappapis.html#handler-window-onscroll">onscroll</a></code> <a href="webappapis.html#event-handlers">event
  handlers</a> of the <code><a href="browsers.html#window">Window</a></code> object, exposed on the
  <code><a href="#the-body-element">body</a></code> element, shadow the generic <a href="webappapis.html#event-handlers">event
  handlers</a> with the same names normally supported by <a href="infrastructure.html#html-elements">HTML
  elements</a>.</p>

  <p class="example">Thus, for example, a bubbling <code title="event-error">error</code> event dispatched on a child of
  <a href="dom.html#the-body-element-0">the body element</a> of a <code><a href="dom.html#document">Document</a></code> would first
  trigger the <code title="handler-onerror"><a href="webappapis.html#handler-onerror">onerror</a></code> <a href="webappapis.html#event-handler-content-attributes">event
  handler content attributes</a> of that element, then that of the
  root <code><a href="the-html-element.html#the-html-element">html</a></code> element, and only <em>then</em> would it
  trigger the <code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code>
  <a href="webappapis.html#event-handler-content-attributes" title="event handler content attributes">event handler content
  attribute</a> on the <code><a href="#the-body-element">body</a></code> element. This is because
  the event would bubble from the target, to the <code><a href="#the-body-element">body</a></code>, to
  the <code><a href="the-html-element.html#the-html-element">html</a></code>, to the <code><a href="dom.html#document">Document</a></code>, to the
  <code><a href="browsers.html#window">Window</a></code>, and the <a href="webappapis.html#event-handlers" title="event handlers">event
  handler</a> on the <code><a href="#the-body-element">body</a></code> is watching the
  <code><a href="browsers.html#window">Window</a></code> not the <code><a href="#the-body-element">body</a></code>. A regular event
  listener attached to the <code><a href="#the-body-element">body</a></code> using <code title="">addEventListener()</code>, however, would be run when the
  event bubbled through the <code><a href="#the-body-element">body</a></code> and not when it reaches
  the <code><a href="browsers.html#window">Window</a></code> object.</p>

  <div class="example">

   <p>This page updates an indicator to show whether or not the user
   is online:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Online or offline?&lt;/title&gt;
  &lt;script&gt;
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)"&gt;
  &lt;p&gt;You are: &lt;span id="status"&gt;(Unknown)&lt;/span&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: common-input-element-attributes.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.7.3 Common input element attributes &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1095 lines suppressed...]
  <div class="example">

   <p>Here is an example of a mail configuration user interface that
   uses the <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
   attribute:</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Mail Account&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john@example.net"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>

  </div>



<!--TOPIC:DOM APIs-->
  </body></html>
--- NEW FILE: interactive-elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.11 Interactive elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="constraints.html" title="4.10.21 Constraints" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-details-element.html" title="4.11.1 The details 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="constraints.html">&#8592; 4.10.21 Constraints</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-details-element.html">4.11.1 The details element &#8594;</a>
  </div>

  <h3 id="interactive-elements"><span class="secno">4.11 </span>Interactive elements</h3>

  </body></html>
--- NEW FILE: the-address-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.10 The address element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-footer-element.html" title="4.4.9 The footer element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="headings-and-sections.html" title="4.4.11 Headings and sections" 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-footer-element.html">&#8592; 4.4.9 The footer element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="headings-and-sections.html">4.4.11 Headings and sections &#8594;</a>
  </div>

  <h4 id="the-address-element"><span class="secno">4.4.10 </span>The <dfn><code>address</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#flow-content-1">Flow content</a>, but with no <a href="content-models.html#heading-content-0">heading
   content</a> descendants, no <a href="content-models.html#sectioning-content-0">sectioning content</a>
   descendants, and 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>, or
   <code><a href="#the-address-element">address</a></code> element 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-address-element">address</a></code> element <a href="rendering.html#represents">represents</a> the
  contact information for its nearest <code><a href="the-article-element.html#the-article-element">article</a></code> or
  <code><a href="the-body-element.html#the-body-element">body</a></code> element ancestor. If that is <a href="dom.html#the-body-element-0">the body
  element</a>, then the contact information applies to the document
  as a whole.</p>

  <div class="example">
   <p>For example, a page at the W3C Web site related to HTML might
   include the following contact information:</p>
   <pre>&lt;ADDRESS&gt;
 &lt;A href="../People/Raggett/"&gt;Dave Raggett&lt;/A&gt;,
 &lt;A href="../People/Arnaud/"&gt;Arnaud Le Hors&lt;/A&gt;,
 contact persons for the &lt;A href="Activity"&gt;W3C HTML Activity&lt;/A&gt;
&lt;/ADDRESS&gt;</pre>
  </div>

  <p>The <code><a href="#the-address-element">address</a></code> element must not be used to represent
  arbitrary addresses (e.g. postal addresses), unless those addresses
  are in fact the relevant contact information. (The <code><a href="the-p-element.html#the-p-element">p</a></code>
  element is the appropriate element for marking up postal addresses
  in general.)</p>

  <p>The <code><a href="#the-address-element">address</a></code> element must not contain information
  other than contact information.</p>

  <div class="example">
   <p>For example, the following is non-conforming use of the
   <code><a href="#the-address-element">address</a></code> element:</p>
   <pre class="bad">&lt;ADDRESS&gt;Last Modified: 1999/12/24 23:37:50&lt;/ADDRESS&gt;</pre>
  </div>

  <p>Typically, the <code><a href="#the-address-element">address</a></code> element would be included
  along with other information in a <code><a href="the-footer-element.html#the-footer-element">footer</a></code> element.</p>

  <div class="impl">

  <p>The contact information for a node <var title="">node</var> is a
  collection of <code><a href="#the-address-element">address</a></code> elements defined by the first
  applicable entry from the following list:</p>

  <dl class="switch"><dt>If <var title="">node</var> is an <code><a href="the-article-element.html#the-article-element">article</a></code> element</dt>
   <dt>If <var title="">node</var> is a <code><a href="the-body-element.html#the-body-element">body</a></code> element</dt>

   <dd>

    <p>The contact information consists of all the
    <code><a href="#the-address-element">address</a></code> elements that have <var title="">node</var>
    as an ancestor and do not have another <code><a href="the-body-element.html#the-body-element">body</a></code> or
    <code><a href="the-article-element.html#the-article-element">article</a></code> element ancestor that is a descendant of <var title="">node</var>.</p>

   </dd>

   <dt>If <var title="">node</var> has an ancestor element that is an <code><a href="the-article-element.html#the-article-element">article</a></code> element</dt>
   <dt>If <var title="">node</var> has an ancestor element that is a <code><a href="the-body-element.html#the-body-element">body</a></code> element</dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information of the nearest <code><a href="the-article-element.html#the-article-element">article</a></code> or
    <code><a href="the-body-element.html#the-body-element">body</a></code> element ancestor, whichever is nearest.</p>

   </dd>

   <dt>If <var title="">node</var>'s <code><a href="dom.html#document">Document</a></code> has <a href="dom.html#the-body-element-0" title="the body element">a body element</a></dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information of <a href="dom.html#the-body-element-0">the body element</a> of the
    <code><a href="dom.html#document">Document</a></code>.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>There is no contact information for <var title="">node</var>.</p>

   </dd>

  </dl><p>User agents may expose the contact information of a node to the
  user, or use it for other purposes, such as indexing sections based
  on the sections' contact information.</p>

  </div>

  <div class="example">

   <p>In this example the footer contains contact information and a
   copyright notice.</p>

   <pre>&lt;footer&gt;
 &lt;address&gt;
  For more details, contact
  &lt;a href="mailto:js@example.com"&gt;John Smith&lt;/a&gt;.
 &lt;/address&gt;
 &lt;p&gt;&lt;small&gt;&#169; copyright 2038 Example Corp.&lt;/small&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: iana.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>12 IANA considerations &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="obsolete.html" title="11 Obsolete features" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="index.html" title="Index" 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="obsolete.html">&#8592; 11 Obsolete features</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="index.html">Index &#8594;</a>
  <ol class="toc"><li><a href="iana.html#iana"><span class="secno">12 </span>IANA considerations</a>
  <ol><li><a href="iana.html#text/html"><span class="secno">12.1 </span><code>text/html</code></a></li><li><a href="iana.html#multipart/x-mixed-replace"><span class="secno">12.2 </span><code>multipart/x-mixed-replace</code></a></li><li><a href="iana.html#application/xhtml+xml"><span class="secno">12.3 </span><code>application/xhtml+xml</code></a></li><li><a href="iana.html#application/x-www-form-urlencoded"><span class="secno">12.4 </span><code>application/x-www-form-urlencoded</code></a></li><li><a href="iana.html#text/cache-manifest"><span class="secno">12.5 </span><code>text/cache-manifest</code></a></li><li><a href="iana.html#web+-scheme-prefix"><span class="secno">12.6 </span><code>web+</code> scheme prefix</a></li></ol></li></ol></div>

  <h2 id="iana"><span class="secno">12 </span>IANA considerations</h2>

  <!-- http://www.w3.org/2002/06/registering-mediatype.html -->


  <h3 id="text/html"><span class="secno">12.1 </span><dfn><code>text/html</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/html
  -->

  <!--
   Obsoletes:
   http://tools.ietf.org/html/rfc2854

   Include a request to retire RFC 2854 persuant to section 6.4 of RFC 2026.
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>html</dd>
   <dt>Required parameters:</dt>
   <dd>No required parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>
    <dl><dt><code title="">charset</code></dt>
     <dd>
      <p>The <code title="">charset</code> parameter may be provided
      to definitively specify the <a href="infrastructure.html#document's-character-encoding">document's character
      encoding</a>, overriding any <a href="the-meta-element.html#character-encoding-declaration" title="character encoding
      declaration">character encoding declarations</a> in the
      document. The parameter's value must be the name of the
      character encoding used to serialize the file, must be a valid
      character encoding name, and must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
      case-insensitive</a> match for the <a href="infrastructure.html#preferred-mime-name">preferred MIME
      name</a> for that encoding. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p>
     </dd>
    </dl></dd>
   <dt>Encoding considerations:</dt>
   <dd>
    8bit (see the section on <a href="the-meta-element.html#character-encoding-declaration" title="character encoding
    declaration">character encoding declarations</a>)
   </dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>

    <p>Entire novels have been written about the security
    considerations that apply to HTML documents. Many are listed in
    this document, to which the reader is referred for more
    details. Some general concerns bear mentioning here, however:</p>

    <p>HTML is scripted language, and has a large number of APIs (some
    of which are described in this document). Script can expose the
    user to potential risks of information leakage, credential
    leakage, cross-site scripting attacks, cross-site request
    forgeries, and a host of other problems. While the designs in this
    specification are intended to be safe if implemented correctly, a
    full implementation is a massive undertaking and, as with any
    software, user agents are likely to have security bugs.</p>

    <p>Even without scripting, there are specific features in HTML
    which, for historical reasons, are required for broad
    compatibility with legacy content but that expose the user to
    unfortunate security problems. In particular, the <code><a href="the-img-element.html#the-img-element">img</a></code>
    element can be used in conjunction with some other features as a
    way to effect a port scan from the user's location on the
    Internet. This can expose local network topologies that the
    attacker would otherwise not be able to determine.</p>

    <p>HTML relies on a compartmentalization scheme sometimes known as
    the <i>same-origin policy</i>. An <a href="browsers.html#origin-0">origin</a> in most
    cases consists of all the pages served from the same host, on the
    same port, using the same protocol.</p>

    <p>It is critical, therefore, to ensure that any untrusted content
    that forms part of a site be hosted on a different
    <a href="browsers.html#origin-0">origin</a> than any sensitive content on that site.
    Untrusted content can easily spoof any other page on the same
    origin, read data from that origin, cause scripts in that origin
    to execute, submit forms to and from that origin even if they are
    protected from cross-site request forgery attacks by unique
    tokens, and make use of any third-party resources exposed to or
    rights granted to that origin.</p>

   </dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for processing both conforming and non-conforming content
    are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd id="authors-using-html">
    This document is the relevant specification. Labeling a resource
    with the <code><a href="#text/html">text/html</a></code> type asserts that the resource is
    an <a href="infrastructure.html#html-documents" title="HTML documents">HTML document</a> using
    <a href="syntax.html#syntax">the HTML syntax</a>.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers, tools for processing Web content, HTML authoring
    tools, search engines, validators.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>No sequence of bytes can uniquely identify an HTML
     document. More information on detecting HTML documents is
     available in the Media Type Sniffing specification. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">html</code>" and "<code title="">htm</code>"
     are commonly, but certainly not exclusively, used as the
     extension for HTML documents.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd><code title="">TEXT</code></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers used with <code><a href="#text/html">text/html</a></code> resources
  either refer to <a href="history.html#the-indicated-part-of-the-document">the indicated part of the document</a> or
  provide state information for in-page scripts.</p>




  <h3 id="multipart/x-mixed-replace"><span class="secno">12.2 </span><dfn><code>multipart/x-mixed-replace</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type multipart/x-mixed-replace
  -->

  <dl><dt>Type name:</dt>
   <dd>multipart</dd>
   <dt>Subtype name:</dt>
   <dd>x-mixed-replace</dd>
   <dt>Required parameters:</dt>
   <dd>
    <ul class="brief"><li><code title="">boundary</code> (defined in RFC2046) <a href="references.html#refsRFC2046">[RFC2046]</a>
    </li></ul></dd>
   <dt>Optional parameters:</dt>
   <dd>No optional parameters.</dd>
   <dt>Encoding considerations:</dt>
   <dd>binary</dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>
    Subresources of a <code><a href="#multipart/x-mixed-replace">multipart/x-mixed-replace</a></code>
    resource can be of any type, including types with non-trivial
    security implications such as <code><a href="#text/html">text/html</a></code>.
   </dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Interoperability considerations:</dt>
   <dd>
    None.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This specification describes processing rules for Web browsers.
    Conformance requirements for generating resources with this type are the same as for <code>multipart/mixed</code>. <a href="references.html#refsRFC2046">[RFC2046]</a>
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    This type is intended to be used in resources generated by Web servers, for consumption by Web browsers.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>No sequence of bytes can uniquely identify a <code><a href="#multipart/x-mixed-replace">multipart/x-mixed-replace</a></code> resource.</dd>
     <dt>File extension(s):</dt>
     <dd>No specific file extensions are recommended for this type.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers used with
  <code><a href="#multipart/x-mixed-replace">multipart/x-mixed-replace</a></code> resources apply to each body
  part as defined by the type used by that body part.</p>


  <h3 id="application/xhtml+xml"><span class="secno">12.3 </span><dfn><code>application/xhtml+xml</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type application/xhtml+xml
  -->

  <!--
   Obsoletes:
   http://tools.ietf.org/html/rfc3236
  -->

  <dl><dt>Type name:</dt>
   <dd>application</dd>
   <dt>Subtype name:</dt>
   <dd>xhtml+xml</dd>
   <dt>Required parameters:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
   <dt>Optional parameters:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
   <dt>Encoding considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Interoperability considerations:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
   <dt id="authors-using-xhtml">Published specification:</dt>
   <dd>
    Labeling a resource with the <code><a href="#application/xhtml+xml">application/xhtml+xml</a></code>
    type asserts that the resource is an XML document that likely has
    a root element from the <a href="namespaces.html#html-namespace-0">HTML namespace</a>. Thus, the
    relevant specifications are the XML specification, the Namespaces
    in XML specification, and this specification. <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a>
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">xhtml</code>" and "<code title="">xht</code>"
     are sometimes used as extensions for XML resources that have a
     root element from the <a href="namespaces.html#html-namespace-0">HTML namespace</a>.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd><code title="">TEXT</code></dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers used with <code><a href="#application/xhtml+xml">application/xhtml+xml</a></code>
  resources have the same semantics as with any <a href="infrastructure.html#xml-mime-type">XML MIME
  type</a>. <a href="references.html#refsRFC3023">[RFC3023]</a></p>


  <h3 id="application/x-www-form-urlencoded"><span class="secno">12.4 </span><dfn><code>application/x-www-form-urlencoded</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type application/x-www-form-urlencoded
  -->

  <dl><dt>Type name:</dt>
   <dd>application</dd>
   <dt>Subtype name:</dt>
   <dd>x-www-form-urlencoded</dd>
   <dt>Required parameters:</dt>
   <dd>No parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>No parameters</dd>
   <dt>Encoding considerations:</dt>
   <dd>7bit (US-ASCII encoding of octets that themselves can be encoding text using any <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>)</dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>
    <p>In isolation, an <code><a href="#application/x-www-form-urlencoded">application/x-www-form-urlencoded</a></code>
    payload poses no security risks. However, as this type is usually
    used as part of a form submission, all the risks that apply to
    HTML forms need to be considered in the context of this type.</p>
   </dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for generating and processing
    <code><a href="#application/x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> payloads are
    defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification.
    Algorithms for <a href="constraints.html#application/x-www-form-urlencoded-encoding-algorithm" title="application/x-www-form-urlencoded encoding algorithm">encoding</a>
    and <a href="constraints.html#application/x-www-form-urlencoded-decoding-algorithm" title="application/x-www-form-urlencoded decoding algorithm">decoding</a> are defined.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers and servers.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>There is no reliable mechanism for recognising <code><a href="#application/x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> payloads.</dd>
     <dt>File extension(s):</dt>
     <dd>Not applicable.</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>Not applicable.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>This type is only intended to be used to describe HTML form
   submission payloads.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers have no meaning with the
  <code><a href="#application/x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> type as this type is
  only used for uploaded payloads that do not have <a href="urls.html#url">URL</a>
  identifiers.</p>


  <h3 id="text/cache-manifest"><span class="secno">12.5 </span><dfn><code>text/cache-manifest</code></dfn></h3>

  <p>This registration is for community review and will be submitted
  to the IESG for review, approval, and registration with IANA.</p>

  <!--
   To: ietf-types@iana.org
   Subject: Registration of media type text/cache-manifest
  -->

  <dl><dt>Type name:</dt>
   <dd>text</dd>
   <dt>Subtype name:</dt>
   <dd>cache-manifest</dd>
   <dt>Required parameters:</dt>
   <dd>No parameters</dd>
   <dt>Optional parameters:</dt>
   <dd>No parameters</dd>
   <dt>Encoding considerations:</dt>
   <dd>8bit (always UTF-8)</dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>
    <p>Cache manifests themselves pose no immediate risk unless
    sensitive information is included within the
    manifest. Implementations, however, are required to follow
    specific rules when populating a cache based on a cache manifest,
    to ensure that certain origin-based restrictions are
    honored. Failure to correctly implement these rules can result in
    information leakage, cross-site scripting attacks, and the
    like.</p>
   </dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Interoperability considerations:</dt>
   <dd>
    Rules for processing both conforming and non-conforming content
    are defined in this specification.
   </dd>
   <dt>Published specification:</dt>
   <dd>
    This document is the relevant specification.
   </dd>
   <dt>Applications that use this media type:</dt>
   <dd>
    Web browsers.
   </dd>
   <dt>Additional information:</dt>
   <dd>
    <dl><dt>Magic number(s):</dt>
     <dd>Cache manifests begin with the string "<code title="">CACHE
     MANIFEST</code>", followed by either a U+0020 SPACE character, a
     "tab" (U+0009) character, a "LF" (U+000A) character, or a "CR" (U+000D) character.</dd>
     <dt>File extension(s):</dt>
     <dd>"<code title="">appcache</code>"</dd>
     <dt>Macintosh file type code(s):</dt>
     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
    </dl></dd>
   <dt>Person &amp; email address to contact for further information:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Intended usage:</dt>
   <dd>Common</dd>
   <dt>Restrictions on usage:</dt>
   <dd>No restrictions apply.</dd>
   <dt>Author:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Change controller:</dt>
   <dd>W3C</dd>
  </dl><p>Fragment identifiers have no meaning with
  <code><a href="#text/cache-manifest">text/cache-manifest</a></code> resources.</p>


<!--PING-->

<!--MD-->


<!--PING-->


  


  <h3 id="web+-scheme-prefix"><span class="secno">12.6 </span><dfn title="scheme-web"><code>web+</code> scheme prefix</dfn></h3>

  <p>This section describes a convention for use with the IANA URI
  scheme registry. It does not itself register a specific scheme. <a href="references.html#refsRFC4395">[RFC4395]</a></p>

  <dl><dt>URI scheme name:</dt>
   <dd>
    Schemes starting with the four characters "<code title="">web+</code>" followed by one or more letters in the range
    <code title="">a</code>-<code title="">z</code>.
   </dd>
   <dt>Status:</dt>
   <dd>permanent</dd>
   <dt>URI scheme syntax:</dt>
   <dd>Scheme-specific.</dd>
   <dt>URI scheme semantics:</dt>
   <dd>Scheme-specific.</dd>
   <dt>Encoding considerations:</dt>
   <dd>All "<code title="">web+</code>" schemes should use UTF-8 encodings were relevant.</dd>
   <dt>Applications/protocols that use this URI scheme name:</dt>
   <dd>Scheme-specific.</dd>
   <dt>Interoperability considerations:</dt>
   <dd>The scheme is expected to be used in the context of Web applications.</dd>
<!--ADD-TOPIC:Security-->
   <dt>Security considerations:</dt>
   <dd>
    Any Web page is able to register a handler for all "<code title="">web+</code>" schemes. As such, these schemes must not be
    used for features intended to be core platform features (e.g.
    network transfer protocols like HTTP or FTP). Similarly, such
    schemes must not store confidential information in their URLs,
    such as usernames, passwords, personal information, or
    confidential project names.
   </dd>
<!--REMOVE-TOPIC:Security-->
   <dt>Contact:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>Author/Change controller:</dt>
   <dd>Ian Hickson &lt;ian@hixie.ch&gt;</dd>
   <dt>References:</dt>
   <dd>
    <cite>Custom scheme and content handlers</cite>, HTML Living Standard:
    <a href="system-state-and-capabilities.html#custom-handlers">http://www.whatwg.org/specs/web-apps/current-work/#custom-handlers</a>
   </dd>
  </dl></body></html>
--- NEW FILE: the-b-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.17 The b element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-i-element.html" title="4.6.16 The i element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-u-element.html" title="4.6.18 The u 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-i-element.html">&#8592; 4.6.16 The i element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-u-element.html">4.6.18 The u element &#8594;</a>
  </div>

  <h4 id="the-b-element"><span class="secno">4.6.17 </span>The <dfn><code>b</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-b-element">b</a></code> element <a href="rendering.html#represents">represents</a> a span of text
  to which attention is being drawn for utilitarian purposes without
  conveying any extra importance and with no implication of an
  alternate voice or mood, such as key words in a document abstract,
  product names in a review, actionable words in interactive
  text-driven software, or an article lede.</p>

  <div class="example">
   <p>The following example shows a use of the <code><a href="#the-b-element">b</a></code> element
   to highlight key words without marking them up as important:</p>
   <pre>&lt;p&gt;The &lt;b&gt;frobonitor&lt;/b&gt; and &lt;b&gt;barbinator&lt;/b&gt; components are fried.&lt;/p&gt;</pre>
  </div>

  <div class="example">
   <p>In the following example, objects in a text adventure are
   highlighted as being special by use of the <code><a href="#the-b-element">b</a></code>
   element.</p>
   <pre>&lt;p&gt;You enter a small room. Your &lt;b&gt;sword&lt;/b&gt; glows
brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre>
  </div>

  <div class="example">
   <p>Another case where the <code><a href="#the-b-element">b</a></code> element is appropriate is
   in marking up the lede (or lead) sentence or paragraph. The
   following example shows how a <a href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC
   article about kittens adopting a rabbit as their own</a> could be
   marked up:</p>
   <pre>&lt;article&gt;
 &lt;h2&gt;Kittens 'adopted' by pet rabbit&lt;/h2&gt;
 &lt;p&gt;&lt;b class="lede"&gt;Six abandoned kittens have found an
 unexpected new mother figure &#8212; a pet rabbit.&lt;/b&gt;&lt;/p&gt;
 &lt;p&gt;Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.&lt;/p&gt;
<i>[...]</i></pre>
  </div>

  <p>As with the <code><a href="the-i-element.html#the-i-element">i</a></code> element, authors can use the <code title="attr-class"><a href="global-attributes.html#classes">class</a></code> attribute on the <code><a href="#the-b-element">b</a></code>
  element to identify why the element is being used, so that if the
  style of a particular use is to be changed at a later date, the
  author doesn't have to go through annotating each use.</p>

  <p>The <code><a href="#the-b-element">b</a></code> element should be used as a last resort when
  no other element is more appropriate. In particular, headings should
  use the <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> to <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> elements, stress emphasis
  should use the <code><a href="the-em-element.html#the-em-element">em</a></code> element, importance should be denoted
  with the <code><a href="the-strong-element.html#the-strong-element">strong</a></code> element, and text marked or highlighted
  should use the <code><a href="the-mark-element.html#the-mark-element">mark</a></code> element.</p>

  <div class="example">
   <p>The following would be <em>incorrect</em> usage:</p>
   <pre class="bad">&lt;p&gt;&lt;b&gt;WARNING!&lt;/b&gt; Do not frob the barbinator!&lt;/p&gt;</pre>
   <p>In the previous example, the correct element to use would have
   been <code><a href="the-strong-element.html#the-strong-element">strong</a></code>, not <code><a href="#the-b-element">b</a></code>.</p>
  </div>

  <p class="note">Style sheets can be used to format <code><a href="#the-b-element">b</a></code>
  elements, just like any other element can be restyled. Thus, it is
  not the case that content in <code><a href="#the-b-element">b</a></code> elements will
  necessarily be boldened.</p>



  </body></html>
--- NEW FILE: states-of-the-type-attribute.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.7.1 States of the type attribute &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...3639 lines suppressed...]
  dates, times, and numbers according to the conventions of either the
  locale implied by the <code><a href="the-input-element.html#the-input-element">input</a></code> element's
  <a href="global-attributes.html#language">language</a> or the user's preferred locale. Using the
  page's locale will ensure consistency with page-provided data.

  </p><p class="example">For example, it would be confusing to users if an
  American English page claimed that a Cirque De Soleil show was going
  to be showing on 02/03<!-- Feb 3 (year) -->, but their browser,
  configured to use the British English locale, only showed the date
  03/02<!-- 3 Feb (year) --> in the ticket purchase date picker. Using
  the page's locale would at least ensure that the date was presented
  in the same format everywhere. (There's still a risk that the user
  would end up arriving a month late, of course, but there's only so
  much that can be done about such cultural differences...)</p>

  </div>



  </body></html>
--- NEW FILE: the-nav-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.3 The nav element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-section-element.html" title="4.4.2 The section element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-article-element.html" title="4.4.4 The article 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-section-element.html">&#8592; 4.4.2 The section element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-article-element.html">4.4.4 The article element &#8594;</a>
  </div>

  <h4 id="the-nav-element"><span class="secno">4.4.3 </span>The <dfn><code>nav</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-nav-element">nav</a></code> element <a href="rendering.html#represents">represents</a> a section of
  a page that links to other pages or to parts within the page: a
  section with navigation links.</p>

  <p class="note">Not all groups of links on a page need to be in a
  <code><a href="#the-nav-element">nav</a></code> element &#8212; the element is primarily intended
  for sections that consist of major navigation blocks. In particular,
  it is common for footers to have a short list of links to various
  pages of a site, such as the terms of service, the home page, and a
  copyright page. The <code><a href="the-footer-element.html#the-footer-element">footer</a></code> element alone is sufficient
  for such cases; while a <code><a href="#the-nav-element">nav</a></code> element can be used in such
  cases, it is usually unnecessary.</p>

  <p class="note">User agents (such as screen readers) that are
  targeted at users who can benefit from navigation information being
  omitted in the initial rendering, or who can benefit from navigation
  information being immediately available, can use this element as a
  way to determine what content on the page to initially skip and/or
  provide on request.</p>

  <div class="example">

   <p>In the following example, the page has several places where
   links are present, but only one of those places is considered a
   navigation section.</p>

   <pre>&lt;body itemscope itemtype="http://schema.org/Blog"&gt;
 &lt;header&gt;
  &lt;h1&gt;Wake up sheeple!&lt;/h1&gt;
  &lt;p&gt;&lt;a href="news.html"&gt;News&lt;/a&gt; -
     &lt;a href="blog.html"&gt;Blog&lt;/a&gt; -
     &lt;a href="forums.html"&gt;Forums&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Last Modified: &lt;span itemprop="dateModified"&gt;2009-04-01&lt;/span&gt;&lt;/p&gt;
  &lt;nav&gt;
   &lt;h1&gt;Navigation&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
 &lt;/header&gt;
 &lt;div&gt;
  &lt;article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"&gt;
   &lt;header&gt;
    &lt;h1 itemprop="headline"&gt;My Day at the Beach&lt;/h1&gt;
   &lt;/header&gt;
   &lt;div itemprop="articleBody"&gt;
    &lt;p&gt;Today I went to the beach and had a lot of fun.&lt;/p&gt;
    <em>...more content...</em>
   &lt;/div&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted &lt;time itemprop="datePublished" datetime="2009-10-10"&gt;Thursday&lt;/time&gt;.&lt;/p&gt;
   &lt;/footer&gt;
  &lt;/article&gt;
  <em>...more blog posts...</em>
 &lt;/div&gt;
 &lt;footer&gt;
  &lt;p&gt;Copyright &#169;
   &lt;span itemprop="copyrightYear"&gt;2010&lt;/span&gt;
   &lt;span itemprop="copyrightHolder"&gt;The Example Company&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; -
     &lt;a href="policy.html"&gt;Privacy Policy&lt;/a&gt; -
     &lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

   <p>Notice the <code><a href="the-div-element.html#the-div-element">div</a></code> elements being used to wrap all the
   contents of the page other than the header and footer, and all the
   contents of the blog entry other than its header and footer.</p>

   <p>You can also see microdata annotations in the above example that
   use the schema.org vocabulary to provide the publication date and
   other metadata about the blog post.</p>

  </div>

  <div class="example">

   <p>In the following example, there are two <code><a href="#the-nav-element">nav</a></code>
   elements, one for primary navigation around the site, and one for
   secondary navigation around the page itself.</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
 &lt;nav&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/events"&gt;Current Events&lt;/a&gt;&lt;/li&gt;
   <em>...more...</em>
  &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;article&gt;
  &lt;header&gt;
   &lt;h1&gt;Demos in Exampland&lt;/h1&gt;
   &lt;p&gt;Written by A. N. Other.&lt;/p&gt;
  &lt;/header&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#public"&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#destroy"&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
    <em>...more...</em>
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div&gt;
   &lt;section id="public"&gt;
    &lt;h1&gt;Public demonstrations&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   &lt;section id="destroy"&gt;
    &lt;h1&gt;Demolitions&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   <em>...more...</em>
  &lt;/div&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="?edit"&gt;Edit&lt;/a&gt; | &lt;a href="?delete"&gt;Delete&lt;/a&gt; | &lt;a href="?Rename"&gt;Rename&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;p&gt;&lt;small&gt;&#169; copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>

  <div class="example">

   <p>A <code><a href="#the-nav-element">nav</a></code> element doesn't have to contain a list, it
   can contain other kinds of content as well. In this navigation
   block, links are provided in prose:</p>

   <pre>&lt;nav&gt;
 &lt;h1&gt;Navigation&lt;/h1&gt;
 &lt;p&gt;You are on my home page. To the north lies &lt;a href="/blog"&gt;my
 blog&lt;/a&gt;, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many &lt;a
 href="/school"&gt;school papers&lt;/a&gt; are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a &lt;a href="/school/thesis"&gt;thesis&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;To the west are several exits. One fun-looking exit is labeled &lt;a
 href="http://games.example.com/"&gt;"games"&lt;/a&gt;. Another more
 boring-looking exit is labeled &lt;a
 href="http://isp.example.net/"&gt;ISP&#8482;&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;To the south lies a dark and dank &lt;a href="/about"&gt;contacts
 page&lt;/a&gt;. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.&lt;/p&gt;
&lt;/nav&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: references.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>References &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1134 lines suppressed...]
   L. Montulli. IETF.</dd>

   <dt id="refsRFC2616">[RFC2616]</dt>
   <dd><cite><a href="http://tools.ietf.org/html/rfc2616">Hypertext
   Transfer Protocol &#8212; 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-meter-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.17 The meter element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-progress-element.html" title="4.10.16 The progress element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="association-of-controls-and-forms.html" title="4.10.18 Association of controls and 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="the-progress-element.html">&#8592; 4.10.16 The progress element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="association-of-controls-and-forms.html">4.10.18 Association of controls and forms &#8594;</a>
  </div>

  <h4 id="the-meter-element"><span class="secno">4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4>
  <!-- Keep this after <progress> and NOT close to <time> -->

  <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="forms.html#category-label" title="category-label">Labelable 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#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>, but there must be no <code><a href="#the-meter-element">meter</a></code> element 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>
   <dd><code title="attr-meter-value"><a href="#attr-meter-value">value</a></code></dd>
   <dd><code title="attr-meter-min"><a href="#attr-meter-min">min</a></code></dd>
   <dd><code title="attr-meter-max"><a href="#attr-meter-max">max</a></code></dd>
   <dd><code title="attr-meter-low"><a href="#attr-meter-low">low</a></code></dd>
   <dd><code title="attr-meter-high"><a href="#attr-meter-high">high</a></code></dd>
   <dd><code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</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="htmlmeterelement">HTMLMeterElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute double <a href="#dom-meter-value" title="dom-meter-value">value</a>;
           attribute double <a href="#dom-meter-min" title="dom-meter-min">min</a>;
           attribute double <a href="#dom-meter-max" title="dom-meter-max">max</a>;
           attribute double <a href="#dom-meter-low" title="dom-meter-low">low</a>;
           attribute double <a href="#dom-meter-high" title="dom-meter-high">high</a>;
           attribute double <a href="#dom-meter-optimum" title="dom-meter-optimum">optimum</a>;
  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-meter-element">meter</a></code> element <a href="rendering.html#represents">represents</a> a scalar
  measurement within a known range, or a fractional value; for example
  disk usage, the relevance of a query result, or the fraction of a
  voting population to have selected a particular candidate.</p>

  <p>This is also known as a gauge.</p>

  <p class="note">The <code><a href="#the-meter-element">meter</a></code> element should not be used to
  indicate progress (as in a progress bar). For that role, HTML
  provides a separate <code><a href="the-progress-element.html#the-progress-element">progress</a></code> element.</p>

  <p class="note">The <code><a href="#the-meter-element">meter</a></code> element also does not
  represent a scalar value of arbitrary range &#8212; for example, it
  would be wrong to use this to report a weight, or height, unless
  there is a known maximum value.</p>

  <p>There are six attributes that determine the semantics of the
  gauge represented by the element.</p>

  <p>The <dfn id="attr-meter-min" title="attr-meter-min"><code>min</code></dfn> attribute
  specifies the lower bound of the range, and the <dfn id="attr-meter-max" title="attr-meter-max"><code>max</code></dfn> attribute specifies
  the upper bound. The <dfn id="attr-meter-value" title="attr-meter-value"><code>value</code></dfn> attribute
  specifies the value to have the gauge indicate as the "measured"
  value.</p>

  <p>The other three attributes can be used to segment the gauge's
  range into "low", "medium", and "high" parts, and to indicate which
  part of the gauge is the "optimum" part. The <dfn id="attr-meter-low" title="attr-meter-low"><code>low</code></dfn> attribute specifies
  the range that is considered to be the "low" part, and the <dfn id="attr-meter-high" title="attr-meter-high"><code>high</code></dfn> attribute specifies
  the range that is considered to be the "high" part. The <dfn id="attr-meter-optimum" title="attr-meter-optimum"><code>optimum</code></dfn> attribute
  gives the position that is "optimum"; if that is higher than the
  "high" value  then this indicates that the higher the value, the
  better; if it's lower than the "low" mark then it indicates that
  lower values are better, and naturally if it is in between then it
  indicates that neither high nor low values are good.</p>

  <p><span class="impl"><strong>Authoring
  requirements</strong>:</span> The <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute must be
  specified. The <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code>, <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code>, <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code>, <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code>, <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code>, and <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> attributes, when present,
  must have values that are <a href="common-microsyntaxes.html#valid-floating-point-number" title="valid floating point
  number">valid floating point numbers</a>.</p>

  <p>In addition, the attributes' values are further constrained:</p>

  <p>Let <var title="">value</var> be the <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute's number.</p>

  <p>If the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code> attribute
  attribute is specified, then let <var title="">minimum</var> be that
  attribute's value; otherwise, let it be zero.</p>

  <p>If the <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code> attribute
  attribute is specified, then let <var title="">maximum</var> be that
  attribute's value; otherwise, let it be 1.0.</p>

  <p>The following inequalities must hold, as applicable:</p>

  <ul class="brief"><li><var title="">minimum</var> &#8804; <var title="">value</var> &#8804; <var title="">maximum</var></li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> is specified)</li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> is specified)</li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> is specified)</li>
   <li><code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> &#8804; <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> (if both <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> and <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> are specified)</li>
  </ul><p class="note">If no minimum or maximum is specified, then the
  range is assumed to be 0..1, and the value thus has to be within
  that range.</p>

  <p>Authors are encouraged to include a textual representation of the
  gauge's state in the element's contents, for users of user agents
  that do not support the <code><a href="#the-meter-element">meter</a></code> element.</p>

  <div class="example">

   <p>The following examples show three gauges that would all be
   three-quarters full:</p>

   <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>

   <p>The following example is incorrect use of the element, because
   it doesn't give a range (and since the default maximum is 1, both
   of the gauges would end up looking maxed out):</p>

   <pre class="bad">&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>

   <p>Instead, one would either not include the meter element, or use
   the meter element with a defined range to give the dimensions in
   context compared to other pies:</p>

   <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
2cm.&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div>

  <p>There is no explicit way to specify units in the
  <code><a href="#the-meter-element">meter</a></code> element, but the units may be specified in the
  <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute in free-form text.</p>

  <div class="example">

   <p>The example above could be extended to mention the units:</p>

   <pre>&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div>

  <div class="impl">

  <p><strong>User agent requirements</strong>: User agents must parse
  the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code>, <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code>, <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code>, <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code>, <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code>, and <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> attributes using the
  <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a>.</p>

  <p>User agents must then use all these numbers to obtain values for
  six points on the gauge, as follows. (The order in which these are
  evaluated is important, as some of the values refer to earlier
  ones.)</p>

  <dl><dt>The <dfn id="concept-meter-minimum" title="concept-meter-minimum">minimum value</dfn></dt>

   <dd>
    <p>If the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code> attribute is
    specified and a value could be parsed out of it, then the minimum
    value is that value. Otherwise, the minimum value is zero.</p>
   </dd>

   <dt>The <dfn id="concept-meter-maximum" title="concept-meter-maximum">maximum value</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code> attribute is
    specified and a value could be parsed out of it, then the
    candidate maximum value is that value. Otherwise, the candidate
    maximum value is 1.0.</p>

    <p>If the candidate maximum value is greater than or equal to the
    minimum value, then the maximum value is the candidate maximum
    value. Otherwise, the maximum value is the same as the minimum
    value.</p>

   </dd>

   <dt>The <dfn id="concept-meter-actual" title="concept-meter-actual">actual value</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute is
    specified and a value could be parsed out of it, then that value
    is the candidate actual value. Otherwise, the candidate actual
    value is zero.</p>

    <p>If the candidate actual value is less than the minimum value,
    then the actual value is the minimum value.</p>

    <p>Otherwise, if the candidate actual value is greater than the
    maximum value, then the actual value is the maximum value.</p>

    <p>Otherwise, the actual value is the candidate actual value.</p>

   </dd>

   <dt>The <dfn id="concept-meter-low" title="concept-meter-low">low boundary</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> attribute is
    specified and a value could be parsed out of it, then the
    candidate low boundary is that value. Otherwise, the candidate low
    boundary is the same as the minimum value.</p>

    <p>If the candidate low boundary is less than the minimum value,
    then the low boundary is the minimum value.</p>

    <p>Otherwise, if the candidate low boundary is greater than the
    maximum value, then the low boundary is the maximum value.</p>

    <p>Otherwise, the low boundary is the candidate low boundary.</p>

   </dd>

   <dt>The <dfn id="concept-meter-high" title="concept-meter-high">high boundary</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> attribute is
    specified and a value could be parsed out of it, then the
    candidate high boundary is that value. Otherwise, the candidate
    high boundary is the same as the maximum value.</p>

    <p>If the candidate high boundary is less than the low boundary,
    then the high boundary is the low boundary.</p>

    <p>Otherwise, if the candidate high boundary is greater than the
    maximum value, then the high boundary is the maximum value.</p>

    <p>Otherwise, the high boundary is the candidate high boundary.</p>

   </dd>

   <dt>The <dfn id="concept-meter-optimum" title="concept-meter-optimum">optimum point</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code>
    attribute is specified and a value could be parsed out of it, then
    the candidate optimum point is that value. Otherwise, the
    candidate optimum point is the midpoint between the minimum value
    and the maximum value.</p>

    <p>If the candidate optimum point is less than the minimum value,
    then the optimum point is the minimum value.</p>

    <p>Otherwise, if the candidate optimum point is greater than the
    maximum value, then the optimum point is the maximum value.</p>

    <p>Otherwise, the optimum point is the candidate optimum
    point.</p>

   </dd>

  </dl><p>All of which will result in the following inequalities all being
  true:</p>

  <ul class="brief"><li>minimum value &#8804; actual value &#8804; maximum value</li>
   <li>minimum value &#8804; low boundary &#8804; high boundary &#8804; maximum value</li>
   <li>minimum value &#8804; optimum point &#8804; maximum value</li>
  </ul><p><strong>UA requirements for regions of the gauge</strong>: If the
  optimum point is equal to the low boundary or the high boundary, or
  anywhere in between them, then the region between the low and high
  boundaries of the gauge must be treated as the optimum region, and
  the low and high parts, if any, must be treated as suboptimal.
  Otherwise, if the optimum point is less than the low boundary, then
  the region between the minimum value and the low boundary must be
  treated as the optimum region, the region from the low boundary up
  to the high boundary must be treated as a suboptimal region, and the
  remaining region must be treated as an even less good region.
  Finally, if the optimum point is higher than the high boundary, then
  the situation is reversed; the region between the high boundary and
  the maximum value must be treated as the optimum region, the region
  from the high boundary down to the low boundary must be treated as a
  suboptimal region, and the remaining region must be treated as an
  even less good region.</p>

  <p><strong>UA requirements for showing the gauge</strong>: When
  representing a <code><a href="#the-meter-element">meter</a></code> element to the user, the UA should
  indicate the relative position of the actual value to the minimum
  and maximum values, and the relationship between the actual value
  and the three regions of the gauge.</p>

  </div>

  <div class="example">
   <p>The following markup:</p>
   <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
&lt;menu type="toolbar"&gt;
 &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
&lt;/menu&gt;
&lt;ul&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
     &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
     &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
     &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
 &lt;/li&gt;
&lt;/ul&gt;</pre>
   <p>Might be rendered as follows:</p>
   <p><img alt="With the &lt;meter&gt; elements rendered as inline green bars of varying lengths." height="178" src="images/sample-meter.png" width="332"></p>
  </div>

  <p>User agents <span class="impl">may</span> combine the value of
  the <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute and the other
  attributes to provide context-sensitive help or inline text
  detailing the actual values.</p>

  <div class="example">
   <p>For example, the following snippet:</p>
   <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
   <p>...might cause the user agent to display a gauge with a tooltip
   saying "Value: 23.2 out of 60." on one line and "seconds" on a
   second line.</p>
  </div>

  <div class="impl">

  <p>The <dfn id="dom-meter-value" title="dom-meter-value"><code>value</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-actual" title="concept-meter-actual">actual value</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-value"><a href="#dom-meter-value">value</a></code> content attribute must be set
  to that string.</p>

  <p>The <dfn id="dom-meter-min" title="dom-meter-min"><code>min</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-minimum" title="concept-meter-minimum">minimum value</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-min"><a href="#dom-meter-min">min</a></code> content attribute must be set to
  that string.</p>

  <p>The <dfn id="dom-meter-max" title="dom-meter-max"><code>max</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-maximum" title="concept-meter-maximum">maximum value</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-max"><a href="#dom-meter-max">max</a></code> content attribute must be set to
  that string.</p>

  <p>The <dfn id="dom-meter-low" title="dom-meter-low"><code>low</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-low" title="concept-meter-low">low boundary</a>. On setting, the given
  value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of the
  number as a floating point number</a> and then the <code title="dom-meter-low"><a href="#dom-meter-low">low</a></code> content attribute must be set to
  that string.</p>

  <p>The <dfn id="dom-meter-high" title="dom-meter-high"><code>high</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-high" title="concept-meter-high">high boundary</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-high"><a href="#dom-meter-high">high</a></code> content attribute must be set to
  that string.</p>

  <p>The <dfn id="dom-meter-optimum" title="dom-meter-optimum"><code>optimum</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-optimum" title="concept-meter-optimum">optimum value</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-optimum"><a href="#dom-meter-optimum">optimum</a></code> content attribute must be
  set to that string.</p>

  <p>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.</p>

  </div>

  <div class="example">

   <p>The following example shows how a gauge could fall back to
   localized or pretty-printed text.</p>

   <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&#8201;261&#8201;928 bytes used
out of 233&#8201;257&#8201;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: the-ul-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.6 The ul element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-ol-element.html" title="4.5.5 The ol element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-li-element.html" title="4.5.7 The li 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-ol-element.html">&#8592; 4.5.5 The ol element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-li-element.html">4.5.7 The li element &#8594;</a>
  </div>

  <h4 id="the-ul-element"><span class="secno">4.5.6 </span>The <dfn><code>ul</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>If the element's children include at least one <code><a href="the-li-element.html#the-li-element">li</a></code> element: <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>Zero or more <code><a href="the-li-element.html#the-li-element">li</a></code> elements.</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="htmlulistelement">HTMLUListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-ul-element">ul</a></code> element <a href="rendering.html#represents">represents</a> a list of
  items, where the order of the items is not important &#8212; that
  is, where changing the order would not materially change the meaning
  of the document.</p>

  <p>The items of the list are the <code><a href="the-li-element.html#the-li-element">li</a></code> element child nodes
  of the <code><a href="#the-ul-element">ul</a></code> element.</p>

  <div class="example">

   <p>The following markup shows a list where the order does not
   matter, and where the <code><a href="#the-ul-element">ul</a></code> element is therefore
   appropriate. Compare this list to the equivalent list in the
   <code><a href="the-ol-element.html#the-ol-element">ol</a></code> section to see an example of the same items using
   the <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element.</p>

   <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Norway
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</pre>

   <p>Note that changing the order of the list does not change the
   meaning of the document. The items in the snippet above are given
   in alphabetical order, but in the snippet below they are given in
   order of the size of their current account balance in 2007, without
   changing the meaning of the document whatsoever:</p>

   <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;Norway
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-html-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.1.1 The html element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="semantics.html" title="4 The elements of HTML" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-head-element.html" title="4.2.1 The head 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="semantics.html">&#8592; 4 The elements of HTML</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-head-element.html">4.2.1 The head element &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="the-html-element.html#the-html-element"><span class="secno">4.1.1 </span>The <code>html</code> element</a></li></ol></li><li><a href="the-html-element.html#document-metadata"><span class="secno">4.2 </span>Document metadata</a>
    </li></ol></li></ol></div>

  <h4 id="the-html-element"><span class="secno">4.1.1 </span>The <dfn><code>html</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 root element of a document.</dd>
   <dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>A <code><a href="the-head-element.html#the-head-element">head</a></code> element followed by a <code><a href="the-body-element.html#the-body-element">body</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>
   <dd><code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</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="htmlhtmlelement">HTMLHtmlElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-html-element">html</a></code> element <a href="rendering.html#represents">represents</a> the root of
  an HTML document.</p>

<!--TOPIC:Offline Web Applications-->
  <p>The <dfn id="attr-html-manifest" title="attr-html-manifest"><code>manifest</code></dfn>
  attribute gives the address of the document's <a href="offline.html#application-cache">application
  cache</a> <a href="offline.html#concept-appcache-manifest" title="concept-appcache-manifest">manifest</a>, if there is
  one. If the attribute is present, the attribute's 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>.</p>

  <p>The <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
  only <a href="offline.html#concept-appcache-init" title="concept-appcache-init">has an effect</a> during
  the early stages of document load. Changing the attribute
  dynamically thus has no effect (and thus, no DOM API is provided for
  this attribute).</p>

  <p class="note">For the purposes of <a href="offline.html#concept-appcache-init" title="concept-appcache-init">application cache selection</a>,
  later <code><a href="the-base-element.html#the-base-element">base</a></code> elements cannot affect the <a href="urls.html#resolve-a-url" title="resolve a url">resolving of relative URLs</a> in <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attributes, as the
  attributes are processed before those elements are seen.</p>

  <p class="note">The <code title="dom-applicationCache"><a href="offline.html#dom-applicationcache">window.applicationCache</a></code> IDL
  attribute provides scripted access to the offline <a href="offline.html#application-cache">application
  cache</a> mechanism.</p>
<!--TOPIC:HTML-->

  <div class="example">

   <p>The <code><a href="#the-html-element">html</a></code> element in the following example declares
   that the document's language is English.</p>

   <pre>&lt;!DOCTYPE html&gt;
<strong>&lt;html lang="en"&gt;</strong>
&lt;head&gt;
&lt;title&gt;Swapping Songs&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Swapping Songs&lt;/h1&gt;
&lt;p&gt;Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.&lt;/p&gt;
&lt;/body&gt;
<strong><a href="#the-html-element">&lt;/html&gt;</a></strong></pre>

  </div>




  <h3 id="document-metadata"><span class="secno">4.2 </span>Document metadata</h3>

  </body></html>
--- NEW FILE: index.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>Index &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...3395 lines suppressed...]

    </td></tr><tr><td> <code title="event-show">show</code>
     </td><td> <code><a href="infrastructure.html#event">Event</a></code>
     </td><td> Fired at a <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element when it is shown as a context menu

    </td></tr><tr><td> <code title="event-submit">submit</code>
     </td><td> <code><a href="infrastructure.html#event">Event</a></code>
     </td><td> Fired at a <code><a href="the-form-element.html#the-form-element">form</a></code> element when it is <a href="constraints.html#concept-form-submit" title="concept-form-submit">submitted</a>

    </td></tr><tr><td> <code title="event-unload">unload</code>
     </td><td> <code><a href="infrastructure.html#event">Event</a></code>
     </td><td> Fired at the <code><a href="browsers.html#window">Window</a></code> object when the page is going away

  </td></tr></tbody></table><p class="note">See also <a href="media-elements.html#mediaevents">media element
  events</a>, <a href="offline.html#appcacheevents">application cache events</a>,
  and <a href="dnd.html#dndevents">drag-and-drop events</a>.</p>



  </body></html>
--- NEW FILE: attributes-common-to-td-and-th-elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.11 Attributes common to td and th elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1400 lines suppressed...]
   is in the <a href="the-th-element.html#attr-th-scope-auto" title="attr-th-scope-auto">auto</a> state, the
   cell is not a <a href="#column-header">column header</a>, and there are no data
   cells in any of the cells covering slots with <var title="">x</var>-coordinates <var title="">x</var> .. <span title=""><var title="">x</var>+<var title="">width</var>-1</span>.</li>

  </ul><p>A header cell is said to be a <dfn id="column-group-header">column group header</dfn> if
  its <code title="attr-th-scope"><a href="the-th-element.html#attr-th-scope">scope</a></code> attribute is in the
  <a href="the-th-element.html#attr-th-scope-colgroup" title="attr-th-scope-colgroup">column group</a> state.</p>

  <p>A header cell is said to be a <dfn id="row-group-header">row group header</dfn> if
  its <code title="attr-th-scope"><a href="the-th-element.html#attr-th-scope">scope</a></code> attribute is in the
  <a href="the-th-element.html#attr-th-scope-rowgroup" title="attr-th-scope-rowgroup">row group</a> state.</p>

  <p>A cell is said to be an <dfn id="empty-cell">empty cell</dfn> if it contains no
  elements and its text content, if any, consists only of
  <a href="common-microsyntaxes.html#white_space">White_Space</a> characters.</p>

  </div>


  </body></html>
--- NEW FILE: wai-aria.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.2.7 WAI-ARIA &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="requirements-relating-to-bidirectional-algorithm-formatting-characters.html" title="3.2.6 Requirements relating to bidirectional-algorithm formatting characters" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="interactions-with-xpath-and-xslt.html" title="3.3 Interactions with XPath and XSLT" 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="requirements-relating-to-bidirectional-algorithm-formatting-characters.html">&#8592; 3.2.6 Requirements relating to bidirectional-algorithm formatting characters</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="interactions-with-xpath-and-xslt.html">3.3 Interactions with XPath and XSLT &#8594;</a>
  </div>

  <h4 id="wai-aria"><span class="secno">3.2.7 </span><dfn>WAI-ARIA</dfn></h4>

  <p>Authors may use the ARIA <code title="attr-aria-role">role</code>
  and <code title="attr-aria-*">aria-*</code> attributes on <a href="infrastructure.html#html-elements">HTML
  elements</a>, in accordance with the requirements described in
  the ARIA specifications, except where these conflict with the
  <span>strong native semantics</span>
<!--FORK--><!--bug 11557-->
  described below. These exceptions are intended to prevent authors
  from making assistive technology products report nonsensical states
  that do not represent the actual state of the document. <a href="references.html#refsARIA">[ARIA]</a></p>

<!--FORK--><!--bug 11557-->

  <div class="impl">

  <p>User agents are required to implement ARIA semantics on all
  <a href="infrastructure.html#html-elements">HTML elements</a>, as defined in the ARIA specifications.
  The <span>implicit ARIA semantics</span> defined below must be
  recognized by implementations for the purposes of ARIA processing.
  <a href="references.html#refsARIAIMPL">[ARIAIMPL]</a></p>

  <p class="note">The ARIA attributes defined in the ARIA
  specifications, and the <span>strong native semantics</span> and
  <span>default implicit ARIA semantics</span> defined below, do not
  have any effect on CSS pseudo-class matching, user interface
  modalities that don't use assistive technologies, or the default
  actions of user interaction events as described in this
  specification.</p> <!-- this is a truism, in that there are no
  requirements that require that those attributes have such an effect,
  and no requirements that relax the requirements on those effects
  such that they could be affected by those attributes -->

  </div>

  <p>The following table defines the <span>strong native
  semantics</span> and corresponding <span>default implicit ARIA
  semantics</span> that apply to <a href="infrastructure.html#html-elements">HTML elements</a>. Each
  language feature (element or attribute) in a cell in the first
  column implies the ARIA semantics (role, states, and/or properties)
  given in the cell in the second column of the same row. <span class="impl">When multiple rows apply to an element, the role from
  the last row to define a role must be applied, and the states and
  properties from all the rows must be combined.</span></p>

  <table id="table-aria-strong"><thead><tr><th>Language feature
     </th><th><span>Strong native semantics</span> and <span>default implied ARIA semantics</span>

   </th></tr></thead><tbody><tr><td><code><a href="the-area-element.html#the-area-element">area</a></code> element that creates a <a href="links.html#hyperlink">hyperlink</a>
     </td><td><code title="attr-aria-role-link">link</code> role

    </td></tr><tr><td><code><a href="the-base-element.html#the-base-element">base</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-datalist-element.html#the-datalist-element">datalist</a></code> element
     </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"

    </td></tr><tr><td><code><a href="the-details-element.html#the-details-element">details</a></code> element
     </td><td><code title="attr-aria-expanded">aria-expanded</code> state set to "true" if the element's <code title="attr-details-open"><a href="the-details-element.html#attr-details-open">open</a></code> attribute is present, and set to "false" otherwise

    </td></tr><tr><td><code><a href="commands.html#the-dialog-element">dialog</a></code> element without an <code title="attr-dialog-open"><a href="commands.html#attr-dialog-open">open</a></code> attribute
     </td><td>The <code title="title-aria-hidden">aria-hidden</code> state set to "true"

    </td></tr><tr><td><code><a href="the-head-element.html#the-head-element">head</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> element
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>

    </td></tr><tr><td><code><a href="the-hr-element.html#the-hr-element">hr</a></code> element
     </td><td><code title="attr-aria-role-separator">separator</code> role

    </td></tr><tr><td><code><a href="the-html-element.html#the-html-element">html</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-img-element.html#the-img-element">img</a></code> element whose <code title="attr-img-alt"><a href="the-img-element.html#attr-img-alt">alt</a></code> attribute's value is empty
     </td><td><code title="attr-aria-role-presentation">presentation</code> role

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#checkbox-state-(type=checkbox)" title="attr-input-type-checkbox">Checkbox</a> state
     </td><td><code title="attr-aria-checked">aria-checked</code> state set to "mixed" if the element's <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate">indeterminate</a></code> IDL attribute is true, or "true" if the element's <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#color-state-(type=color)" title="attr-input-type-color">Color</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#date-state-(type=date)" title="attr-input-type-date">Date</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#date-and-time-state-(type=datetime)" title="attr-input-type-datetime">Date and Time</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#local-date-and-time-state-(type=datetime-local)" title="attr-input-type-datetime-local">Local Date and Time</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#e-mail-state-(type=email)" title="attr-input-type-email">E-mail</a> state with no <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#file-upload-state-(type=file)" title="attr-input-type-file">File Upload</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#hidden-state-(type=hidden)" title="attr-input-type-hidden">Hidden</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#month-state-(type=month)" title="attr-input-type-month">Month</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#number-state-(type=number)" title="attr-input-type-number">Number</a> state
     </td><td><code title="attr-aria-role-spinbutton">spinbutton</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, and, if the result of applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is a number, with the <code titl="attr-aria-valuenow">aria-valuenow</code> property set to that number

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#password-state-(type=password)" title="attr-input-type-password">Password</a> state
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#radio-button-state-(type=radio)" title="attr-input-type-radio">Radio Button</a> state
     </td><td><code title="attr-aria-checked">aria-checked</code> state set to "true" if the element's <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#range-state-(type=range)" title="attr-input-type-range">Range</a> state
     </td><td><code title="attr-aria-role-slider">slider</code> role, with the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the result of applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>, if that results in a number, or the <a href="states-of-the-type-attribute.html#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> otherwise

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#reset-button-state-(type=reset)" title="attr-input-type-reset">Reset Button</a> state
     </td><td><code title="attr-aria-role-button">button</code> role

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-search">Search</a> state with no <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#submit-button-state-(type=submit)" title="attr-input-type-submit">Submit Button</a> state
     </td><td><code title="attr-aria-role-button">button</code> role

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#telephone-state-(type=tel)" title="attr-input-type-tel">Telephone</a> state with no <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-text">Text</a> state with no <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-text">Text</a>, <a href="states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-search">Search</a>, <a href="states-of-the-type-attribute.html#telephone-state-(type=tel)" title="attr-input-type-tel">Telephone</a>, <a href="states-of-the-type-attribute.html#url-state-(type=url)" title="attr-input-type-url">URL</a>, or <a href="states-of-the-type-attribute.html#e-mail-state-(type=email)" title="attr-input-type-email">E-mail</a> states with a <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-combobox">combobox</code> role, with the <code title="attr-aria-owns">aria-owns</code> property set to the same value as the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute, and the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#time-state-(type=time)" title="attr-input-type-time">Time</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#url-state-(type=url)" title="attr-input-type-url">URL</a> state with no <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#week-state-(type=week)" title="attr-input-type-week">Week</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element that is <a href="common-input-element-attributes.html#concept-input-required" title="concept-input-required">required</a>
     </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"

    </td></tr><tr><td><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-label-element.html#the-label-element">label</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-link-element.html#the-link-element">link</a></code> element that creates a <a href="links.html#hyperlink">hyperlink</a>
     </td><td><code title="attr-aria-role-link">link</code> role

    </td></tr><tr><td><code><a href="the-menu-element.html#the-menu-element">menu</a></code> element with a <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#context-menu-state" title="context menu state">context menu</a> state
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-menu-element.html#the-menu-element">menu</a></code> element with a <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#list-state" title="list state">list</a> state
     </td><td><code title="attr-aria-role-menu">menu</code> role

    </td></tr><tr><td><code><a href="the-menu-element.html#the-menu-element">menu</a></code> element with a <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#toolbar-state" title="toolbar state">toolbar</a> state
     </td><td><code title="attr-aria-role-toolbar">toolbar</code> role

    </td></tr><tr><td><code><a href="the-meta-element.html#the-meta-element">meta</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-meter-element.html#the-meter-element">meter</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-nav-element.html#the-nav-element">nav</a></code> element
     </td><td><code title="attr-aria-role-navigation">navigation</code> role

    </td></tr><tr><td><code><a href="the-noscript-element.html#the-noscript-element">noscript</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-optgroup-element.html#the-optgroup-element">optgroup</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-option-element.html#the-option-element">option</a></code> element that is in a <a href="the-select-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a> or that represents a suggestion in a <code><a href="the-datalist-element.html#the-datalist-element">datalist</a></code> element
     </td><td><code title="attr-aria-role-option">option</code> role, with the <code title="attr-aria-selected">aria-selected</code> state set to "true" if the element's <a href="the-option-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, or "false" otherwise.

    </td></tr><tr><td><code><a href="the-param-element.html#the-param-element">param</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-progress-element.html#the-progress-element">progress</a></code> element
     </td><td><code title="attr-aria-role-progressbar">progressbar</code> role, with, if the progress bar is determinate, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the maximum value of the progress bar, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to zero, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the current value of the progress bar

    </td></tr><tr><td><code><a href="the-script-element.html#the-script-element">script</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-select-element.html#the-select-element">select</a></code> element with a <code title="attr-select-multiple"><a href="the-select-element.html#attr-select-multiple">multiple</a></code> attribute
     </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "true"

    </td></tr><tr><td><code><a href="the-select-element.html#the-select-element">select</a></code> element with no <code title="attr-select-multiple"><a href="the-select-element.html#attr-select-multiple">multiple</a></code> attribute
     </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"

    </td></tr><tr><td><code><a href="the-select-element.html#the-select-element">select</a></code> element with a <code title="attr-select-required"><a href="the-select-element.html#attr-select-required">required</a></code> attribute
     </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"

    </td></tr><tr><td><code><a href="the-source-element.html#the-source-element">source</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-style-element.html#the-style-element">style</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-summary-element.html#the-summary-element">summary</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element
     </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="attr-aria-multiline">aria-multiline</code> property set to "true", and the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-textarea-readonly"><a href="the-textarea-element.html#attr-textarea-readonly">readonly</a></code> attribute

    </td></tr><tr><td><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element with a <code title="attr-textarea-required"><a href="the-textarea-element.html#attr-textarea-required">required</a></code> attribute
     </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"

    </td></tr><tr><td><code><a href="the-title-element.html#the-title-element">title</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>

    </td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "checkbox", and that is a descendant of a <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element whose <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#list-state" title="list state">list</a> state
     </td><td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="commands.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise

    </td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "command", and that is a descendant of a <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element whose <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#list-state" title="list state">list</a> state
     </td><td><code title="attr-aria-role-menuitem">menuitem</code> role

    </td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "radio", and that is a descendant of a <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element whose <code title="attr-menu-type"><a href="the-menu-element.html#attr-menu-type">type</a></code> attribute in the <a href="the-menu-element.html#list-state" title="list state">list</a> state
     </td><td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="commands.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise

    </td></tr><tr><td>Element that is <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>
     </td><td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"

    </td></tr><tr><td>Element that is <a href="editing.html#inert">inert</a>
     </td><td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"

    </td></tr><tr><td>Element with a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute
     </td><td>The <code title="title-aria-hidden">aria-hidden</code> state set to "true"

    </td></tr><tr><td>Element that is a <a href="constraints.html#candidate-for-constraint-validation">candidate for constraint validation</a> but that does not <a href="constraints.html#concept-fv-valid" title="concept-fv-valid">satisfy its constraints</a>
     </td><td>The <code title="title-aria-invalid">aria-invalid</code> state set to "true"

  </td></tr></tbody></table><p>Some <a href="infrastructure.html#html-elements">HTML elements</a> have native semantics that can be
  overridden. The following table lists these elements and their
  <span>default implicit ARIA semantics</span>, along with the
  restrictions that apply to those elements. Each language feature
  (element or attribute) in a cell in the first column implies, unless
  otherwise overridden, the ARIA semantic (role, state, or property)
  given in the cell in the second column of the same row, but this
  semantic may be overridden under the conditions listed in the cell
  in the third column of that row. In addition, any element may be
  given the <code title="attr-aria-role-presentation">presentation</code> role,
  regardless of the restrictions below.</p>

  <table id="table-aria-weak"><thead><tr><th>Language feature
     </th><th>Default implied ARIA semantic
     </th><th>Restrictions

   </th></tr></thead><tbody><tr><td><code><a href="the-a-element.html#the-a-element">a</a></code> element that creates a <a href="links.html#hyperlink">hyperlink</a>
     </td><td><code title="attr-aria-role-link">link</code> role
     </td><td>Role must be either <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-button">button</code><!--!-->, <code title="attr-aria-role-checkbox">checkbox</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code><!--!-->

    </td></tr><tr><td><code><a href="the-address-element.html#the-address-element">address</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be <code title="attr-aria-role-contentinfo">contentinfo</code>

    </td></tr><tr><td><code><a href="the-article-element.html#the-article-element">article</a></code> element
     </td><td><code title="attr-aria-role-article">article</code> role
     </td><td>Role must be either <code title="attr-aria-role-article">article</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-aside-element">aside</a></code> element
     </td><td><code title="attr-aria-role-note">note</code> role
     </td><td>Role must be either <code title="attr-aria-role-note">note</code>, <code title="attr-aria-role-complementary">complementary</code>, or <code title="attr-aria-role-search">search</code>

    </td></tr><tr><td><code><a href="the-audio-element.html#the-audio-element">audio</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be <code title="attr-aria-role-application">application</code>

    </td></tr><tr><td><code><a href="the-button-element.html#the-button-element">button</a></code> element
     </td><td><code title="attr-aria-role-button">button</code> role
     </td><td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->

    </td></tr><tr><td><code><a href="the-details-element.html#the-details-element">details</a></code> element
     </td><td><code title="attr-aria-role-group">group</code> role
     </td><td>Role must be a role that supports <code title="attr-aria-expanded">aria-expanded</code>

    </td></tr><tr><td><code><a href="commands.html#the-dialog-element">dialog</a></code> element
     </td><td><code title="attr-aria-role-dialog">dialog</code> role
     </td><td>Role must be either
      <code title="attr-aria-role-alert">alert</code>,
      <code title="attr-aria-role-alertdialog">alertdialog</code>,
      <code title="attr-aria-role-application">application</code>,
      <code title="attr-aria-role-contentinfo">contentinfo</code>,
      <code title="attr-aria-role-dialog">dialog</code>,
      <code title="attr-aria-role-document">document</code>,
      <code title="attr-aria-role-log">log</code>,
      <code title="attr-aria-role-main">main</code>,
      <code title="attr-aria-role-marquee">marquee</code>,
      <code title="attr-aria-role-region">region</code>,
      <code title="attr-aria-role-search">search</code>, or
      <code title="attr-aria-role-status">status</code>

    </td></tr><tr><td><code><a href="the-embed-element.html#the-embed-element">embed</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>

    </td></tr><tr><td><code><a href="the-footer-element.html#the-footer-element">footer</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be <code title="attr-aria-role-contentinfo">contentinfo</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> element that does not have an <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> ancestor
     </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="headings-and-sections.html#outline-depth">outline depth</a>
     </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>

    </td></tr><tr><td><code><a href="the-header-element.html#the-header-element">header</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be <code title="attr-aria-role-banner">banner</code>

    </td></tr><tr><td><code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>

    </td></tr><tr><td><code><a href="the-img-element.html#the-img-element">img</a></code> element whose <code title="attr-img-alt"><a href="the-img-element.html#attr-img-alt">alt</a></code> attribute's value is absent
     </td><td><code title="attr-aria-role-img">img</code> role
     </td><td>No restrictions

    </td></tr><tr><!--!--><!--(there's no reason to convey <img> elements with alt="" text as images to an AT)--><td><code><a href="the-img-element.html#the-img-element">img</a></code> element whose <code title="attr-img-alt"><a href="the-img-element.html#attr-img-alt">alt</a></code> attribute's value is present and not empty
     </td><td><code title="attr-aria-role-img">img</code> role
     </td><td>No restrictions

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#button-state-(type=button)" title="attr-input-type-button">Button</a> state
     </td><td><code title="attr-aria-role-button">button</code> role
     </td><td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#checkbox-state-(type=checkbox)" title="attr-input-type-checkbox">Checkbox</a> state
     </td><td><code title="attr-aria-role-checkbox">checkbox</code> role
     </td><td>Role must be either <code title="attr-aria-role-checkbox">checkbox</code> or <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#image-button-state-(type=image)" title="attr-input-type-image">Image Button</a> state
     </td><td><code title="attr-aria-role-button">button</code> role
     </td><td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->

    </td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#radio-button-state-(type=radio)" title="attr-input-type-radio">Radio Button</a> state
     </td><td><code title="attr-aria-role-radio">radio</code> role
     </td><td>Role must be either <code title="attr-aria-role-radio">radio</code> or <code title="attr-aria-role-menuitemradio">menuitemradio</code>

    </td></tr><tr><td><code><a href="the-li-element.html#the-li-element">li</a></code> element whose parent is an <code><a href="the-ol-element.html#the-ol-element">ol</a></code> or <code><a href="the-ul-element.html#the-ul-element">ul</a></code> element
     </td><td><code title="attr-aria-role-listitem">listitem</code> role
     </td><td>Role must be either <code title="attr-aria-role-listitem">listitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-option">option</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>

    </td></tr><tr><td><code><a href="the-object-element.html#the-object-element">object</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>

    </td></tr><tr><td><code><a href="the-ol-element.html#the-ol-element">ol</a></code> element
     </td><td><code title="attr-aria-role-list">list</code> role
     </td><td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title="attr-aria-role-tree">tree</code>

    </td></tr><tr><td><code><a href="the-output-element.html#the-output-element">output</a></code> element
     </td><td><code title="attr-aria-role-status">status</code> role
     </td><td>No restrictions

    </td></tr><tr><td><code><a href="the-section-element.html#the-section-element">section</a></code> element
     </td><td><code title="attr-aria-role-region">region</code> role
     </td><td>Role must be either
      <code title="attr-aria-role-alert">alert</code>,
      <code title="attr-aria-role-alertdialog">alertdialog</code>,
      <code title="attr-aria-role-application">application</code>,
      <code title="attr-aria-role-contentinfo">contentinfo</code>,
      <code title="attr-aria-role-dialog">dialog</code>,
      <code title="attr-aria-role-document">document</code>,
      <code title="attr-aria-role-log">log</code>,
      <code title="attr-aria-role-main">main</code>,
      <code title="attr-aria-role-marquee">marquee</code>,
      <code title="attr-aria-role-region">region</code>,
      <code title="attr-aria-role-search">search</code>, or
      <code title="attr-aria-role-status">status</code>

    </td></tr><tr><td><code><a href="the-ul-element.html#the-ul-element">ul</a></code> element
     </td><td><code title="attr-aria-role-list">list</code> role
     </td><td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title="attr-aria-role-tree">tree</code>

    </td></tr><tr><td><code><a href="the-video-element.html#the-video-element">video</a></code> element
     </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
     </td><td>If specified, role must be <code title="attr-aria-role-application">application</code>

    </td></tr><tr><td><a href="dom.html#the-body-element-0">The body element</a>
     </td><td><code title="attr-aria-role-document">document</code> role
     </td><td>Role must be either <code title="attr-aria-role-document">document</code> or <code title="attr-aria-role-application">application</code>

  </td></tr></tbody></table><p>The entry "<dfn id="concept-role-none" title="concept-role-none">no role</dfn>", when
  used as a <span title="strong native semantics">strong native
  semantic</span>, means that no role other than <code title="attr-aria-role-presentation">presentation</code> can be used.
  When used as a <span title="default implied ARIA semantics">default
  implied ARIA semantic</span>, it means the user agent has no default
  mapping to ARIA roles. (However, it probably will have its own
  mappings to the accessibility layer.)</p>

  <div class="impl">

<!-- EDITORIAL: this paragraph is redundant with WAI-ARIA and doesn't really make any sense anyway; see bug 9437 --><!--FORK-->
  <p>The WAI-ARIA specification neither requires or forbids user
  agents from enhancing native presentation and interaction behaviors
  on the basis of WAI- ARIA markup. Even mainstream user agents might
  choose to expose metadata or navigational features directly or via
  user-installed extensions; for example, exposing required form
  fields or landmark navigation. User agents are encouraged to
  maximize their usefulness to users, including users without
  disabilities.</p>
<!-- EDITORIAL --><!--FORK-->

  <p>Conformance checkers are encouraged to phrase errors such that
  authors are encouraged to use more appropriate elements rather than
  remove accessibility annotations. For example, if an <code><a href="the-a-element.html#the-a-element">a</a></code>
  element is marked as having the <code title="attr-aria-role-button">button</code> role, a conformance
  checker could say "Use a more appropriate element to represent a
  button, for example a <code><a href="the-button-element.html#the-button-element">button</a></code> element or an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element" rather than "The <code title="attr-aria-role-button">button</code> role cannot be used with
  <code><a href="the-a-element.html#the-a-element">a</a></code> elements".</p>

  </div>

  <div class="example">

   <p>These features can be used to make accessibility tools render
   content to their users in more useful ways. For example, ASCII art,
   which is really an image, appears to be text, and in the absence of
   appropriate annotations would end up being rendered by screen
   readers as a very painful reading of lots of punctuation. Using the
   features described in this section, one can instead make the ATs
   skip the ASCII art and just read the caption:</p>

   <pre>&lt;figure <strong>role="img" aria-labelledby="fish-caption"</strong>&gt; <!-- that's "labelled" with TWO "l"s -->
 &lt;pre&gt;
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     &gt;&lt;  &lt;
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
 &lt;/pre&gt;
 &lt;figcaption <strong>id="fish-caption"</strong>&gt;
  Joan G. Stark, "&lt;cite&gt;fish&lt;/cite&gt;".
  October 1997. ASCII on electrons. 28&#215;8.
 &lt;/figcaption&gt; 
&lt;/figure&gt; 
   </pre>

   <!-- source: http://www.geocities.com/SoHo/7373/aquatic.htm#fish -->

  </div>



  </body></html>
--- NEW FILE: the-ruby-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.20 The ruby element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-mark-element.html" title="4.6.19 The mark element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-rt-element.html" title="4.6.21 The rt 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-mark-element.html">&#8592; 4.6.19 The mark element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-rt-element.html">4.6.21 The rt element &#8594;</a>
  </div>

  <h4 id="the-ruby-element"><span class="secno">4.6.20 </span>The <dfn><code>ruby</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>One or more groups of: <a href="content-models.html#phrasing-content-1">phrasing content</a> followed either by a single <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element, or an <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element, an <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element, and another <code><a href="the-rp-element.html#the-rp-element">rp</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>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-ruby-element">ruby</a></code> element allows one or more spans of
  phrasing content to be marked with ruby annotations. Ruby
  annotations are short runs of text presented alongside base text,
  primarily used in East Asian typography as a guide for
  pronunciation or to include other annotations. In Japanese, this
  form of typography is also known as <i>furigana</i>.</p>

  <p>A <code><a href="#the-ruby-element">ruby</a></code> element <a href="rendering.html#represents">represents</a> the spans of
  phrasing content it contains, ignoring all the child <code><a href="the-rt-element.html#the-rt-element">rt</a></code>
  and <code><a href="the-rp-element.html#the-rp-element">rp</a></code> elements and their descendants. Those spans of
  phrasing content have associated annotations created using the
  <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element.</p>

  <div class="example">

   <!-- this is the hiragana for the word "kanji" ("chinese character") in japanese -->
   <!-- in japanese, ruby-like typography is called "furigana" -->

   <p>In this example, each ideograph in the Japanese text <span lang="ja" title="">&#28450;&#23383;</span> is annotated with its
   reading in hiragana.</p>

   <pre lang="ja">...
&lt;ruby&gt;&#28450;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&#23383;&lt;rt&gt;&#12376;&lt;/rt&gt;&lt;/ruby&gt;
...</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height="78" src="images/sample-ruby-ja.png" width="171"></p>

  </div>

  <div class="example">

   <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->

   <p>In this example, each ideograph in the traditional Chinese text
   <span lang="zh-TW" title="">&#28450;&#23383;</span> is annotated
   with its bopomofo reading.</p>

   <pre lang="zh-TW">&lt;ruby&gt;&#28450;&lt;rt&gt;&#12559;&#12578;&#715;&lt;/rt&gt;&#23383;&lt;rt&gt;&#12567;&#715;&lt;/rt&gt;&lt;/ruby&gt;</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height="100" src="images/sample-ruby-bopomofo.png" width="78"></p>

  </div>

  <div class="example">

   <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->

   <p>In this example, each ideograph in the simplified Chinese text
   <span lang="zh-CN" title="">&#27721;&#23383;</span> is annotated
   with its pinyin reading.</p>

   <pre lang="zh-CN">...&lt;ruby&gt;&#27721;&lt;rt&gt;h&#224;n&lt;/rt&gt;&#23383;&lt;rt&gt;z&#236;&lt;/rt&gt;&lt;/ruby&gt;...</pre>

   <p>This might be rendered as:</p>

   <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height="79" src="images/sample-ruby-pinyin.png" width="173"></p>

  </div>

  <!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->


  </body></html>
--- NEW FILE: the-track-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.9 The track element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-source-element.html" title="4.8.8 The source element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="media-elements.html" title="4.8.10 Media 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-source-element.html">&#8592; 4.8.8 The source element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="media-elements.html">4.8.10 Media elements &#8594;</a>
  </div>

  <h4 id="the-track-element"><span class="secno">4.8.9 </span>The <dfn><code>track</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>.</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-track-kind"><a href="#attr-track-kind">kind</a></code></dd>
   <dd><code title="attr-track-src"><a href="#attr-track-src">src</a></code></dd>
   <dd><code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code></dd>
   <dd><code title="attr-track-label"><a href="#attr-track-label">label</a></code></dd>
   <dd><code title="attr-track-default"><a href="#attr-track-default">default</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="htmltrackelement">HTMLTrackElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-track-kind" title="dom-track-kind">kind</a>;
           attribute DOMString <a href="#dom-track-src" title="dom-track-src">src</a>;
           attribute DOMString <a href="#dom-track-srclang" title="dom-track-srclang">srclang</a>;
           attribute DOMString <a href="#dom-track-label" title="dom-track-label">label</a>;
           attribute boolean <a href="#dom-track-default" title="dom-track-default">default</a>;

  const unsigned short <a href="#dom-track-none" title="dom-track-NONE">NONE</a> = 0;
  const unsigned short <a href="#dom-track-loading" title="dom-track-LOADING">LOADING</a> = 1;
  const unsigned short <a href="#dom-track-loaded" title="dom-track-LOADED">LOADED</a> = 2;
  const unsigned short <a href="#dom-track-error" title="dom-track-ERROR">ERROR</a> = 3;
  readonly attribute unsigned short <a href="#dom-track-readystate" title="dom-track-readyState">readyState</a>;

  readonly attribute <a href="media-elements.html#texttrack">TextTrack</a> <a href="#dom-track-track" title="dom-track-track">track</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-track-element">track</a></code> element allows authors to specify explicit
  external timed <a href="media-elements.html#text-track" title="text track">text tracks</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-track-kind" title="attr-track-kind"><code>kind</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The keyword
  given in the first cell of each row maps to the state given in the
  second cell.</p>

  <table><thead><tr><th>Keyword
     </th><th>State
     </th><th>Brief description
   </th></tr></thead><tbody><tr><td><dfn id="attr-track-kind-keyword-subtitles" title="attr-track-kind-keyword-subtitles"><code>subtitles</code></dfn>
     </td><td><dfn id="attr-track-kind-subtitles" title="attr-track-kind-subtitles">Subtitles</dfn>
     </td><td>
      Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href="media-elements.html#media-resource">media resource</a>'s audio track).
      Overlaid on the video.
    </td></tr><tr><td><dfn id="attr-track-kind-keyword-captions" title="attr-track-kind-keyword-captions"><code>captions</code></dfn>
     </td><td><dfn id="attr-track-kind-captions" title="attr-track-kind-captions">Captions</dfn>
     </td><td>
      Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf).
      Overlaid on the video; labeled as appropriate for the hard-of-hearing.
    </td></tr><tr><td><dfn id="attr-track-kind-keyword-descriptions" title="attr-track-kind-keyword-descriptions"><code>descriptions</code></dfn>
     </td><td><dfn id="attr-track-kind-descriptions" title="attr-track-kind-descriptions">Descriptions</dfn>
     </td><td>
      Textual descriptions of the video component of the <a href="media-elements.html#media-resource">media resource</a>, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
      Synthesized as audio.
    </td></tr><tr><td><dfn id="attr-track-kind-keyword-chapters" title="attr-track-kind-keyword-chapters"><code>chapters</code></dfn>
     </td><td><dfn id="attr-track-kind-chapters" title="attr-track-kind-chapters">Chapters</dfn>
     </td><td>
      Chapter titles, intended to be used for navigating the <a href="media-elements.html#media-resource">media resource</a>.
      Displayed as an interactive (potentially nested) list in the user agent's interface.
    </td></tr><tr><td><dfn id="attr-track-kind-keyword-metadata" title="attr-track-kind-keyword-metadata"><code>metadata</code></dfn>
     </td><td><dfn id="attr-track-kind-metadata" title="attr-track-kind-metadata">Metadata</dfn>
     </td><td>
      Tracks intended for use from script.
      Not displayed by the user agent.
  </td></tr></tbody></table><p>The attribute may be omitted. The <i>missing value default</i> is
  the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a> state.</p>

  <p>The <dfn id="attr-track-src" title="attr-track-src"><code>src</code></dfn> attribute
  gives the address of the text track data. 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>

  <div class="impl">

  <p>If the element has a <code title="attr-track-src"><a href="#attr-track-src">src</a></code>
  attribute whose value is not the empty string and whose value, when
  the attribute was set, could be successfully <a href="urls.html#resolve-a-url" title="resolve a
  url">resolved</a> relative to the element, then the element's
  <dfn id="track-url">track URL</dfn> is the resulting <a href="urls.html#absolute-url">absolute
  URL</a>. Otherwise, the element's <a href="#track-url">track URL</a> is the
  empty string.</p>

  </div>

  <p>If the element's <a href="#track-url">track URL</a> identifies a
  <a href="infrastructure.html#webvtt">WebVTT</a> resource, and the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute is not in the <a href="#attr-track-kind-metadata" title="attr-track-kind-metadata">metadata</a> state, then the
  <a href="infrastructure.html#webvtt">WebVTT</a> file must be a <a href="infrastructure.html#webvtt-file-using-cue-text">WebVTT file using cue
  text</a>. <a href="references.html#refsWEBVTT">[WEBVTT]</a></p>

  <p>Furthermore, if the element's <a href="#track-url">track URL</a> identifies a
  <a href="infrastructure.html#webvtt">WebVTT</a> resource, and the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute is in the <a href="#attr-track-kind-chapters" title="attr-track-kind-chapters">chapters</a> state, then the
  <a href="infrastructure.html#webvtt">WebVTT</a> file must be both a <a href="infrastructure.html#webvtt-file-using-chapter-title-text">WebVTT file using
  chapter title text</a> and a <a href="infrastructure.html#webvtt-file-using-only-nested-cues">WebVTT file using only nested
  cues</a>. <a href="references.html#refsWEBVTT">[WEBVTT]</a></p>

  <p>The <dfn id="attr-track-srclang" title="attr-track-srclang"><code>srclang</code></dfn>
  attribute gives the language of the text track data. The value must
  be a valid BCP 47 language tag. This attribute must be present if
  the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute is
  in the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a>
  state. <a href="references.html#refsBCP47">[BCP47]</a></p>

  <div class="impl">

  <p>If the element has a <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code> attribute whose value is
  not the empty string, then the element's <dfn id="track-language">track language</dfn>
  is the value of the attribute. Otherwise, the element has no
  <a href="#track-language">track language</a>.</p>

  </div>

  <p>The <dfn id="attr-track-label" title="attr-track-label"><code>label</code></dfn>
  attribute gives a user-readable title for the track. This title is
  used by user agents when listing <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitle</a>, <a href="#attr-track-kind-captions" title="attr-track-kind-captions">caption</a>, and <a href="#attr-track-kind-descriptions" title="attr-track-kind-descriptions">audio description</a> tracks
  in their user interface.</p>

  <p>The value of the <code title="attr-track-label"><a href="#attr-track-label">label</a></code>
  attribute, if the attribute is present, must not be the empty
  string. Furthermore, there must not be two <code><a href="#the-track-element">track</a></code>
  element children of the same <a href="media-elements.html#media-element">media element</a> whose <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attributes are in the same
  state, whose <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code>
  attributes are both missing or have values that represent the same
  language, and whose <code title="attr-track-label"><a href="#attr-track-label">label</a></code>
  attributes are again both missing or both have the same value.</p>

  <div class="impl">

  <p>If the element has a <code title="attr-track-label"><a href="#attr-track-label">label</a></code>
  attribute whose value is not the empty string, then the element's
  <dfn id="track-label">track label</dfn> is the value of the attribute. Otherwise, the
  element's <a href="#track-label">track label</a> is a user-agent defined string
  (e.g. the string "untitled" in the user's locale, or a value
  automatically generated from the other attributes).</p>

  </div>

  <p>The <dfn id="attr-track-default" title="attr-track-default"><code>default</code></dfn>
  attribute, if specified, indicates that the track is to be enabled
  if the user's preferences do not indicate that another track would
  be more appropriate. There must not be more than one
  <code><a href="#the-track-element">track</a></code> element with the same parent node with the <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute specified.</p>

  <dl class="domintro"><dt><var title="">track</var> . <code title="dom-track-readyState"><a href="#dom-track-readystate">readyState</a></code></dt>
   <dd>
    <p>Returns the <a href="media-elements.html#text-track-readiness-state">text track readiness state</a>,
    represented by a number from the following list:</p>
    <dl><dt><var title="">track</var> . <code title="dom-track-NONE"><a href="#dom-track-none">NONE</a></code> (0)</dt>
     <dd>
      <p>The <a href="media-elements.html#text-track-not-loaded">text track not loaded</a> state.</p>
     </dd>
     <dt><var title="">track</var> . <code title="dom-track-LOADING"><a href="#dom-track-loading">LOADING</a></code> (1)</dt>
     <dd>
      <p>The <a href="media-elements.html#text-track-loading">text track loading</a> state.</p>
     </dd>
     <dt><var title="">track</var> . <code title="dom-track-LOADED"><a href="#dom-track-loaded">LOADED</a></code> (2)</dt>
     <dd>
      <p>The <a href="media-elements.html#text-track-loaded">text track loaded</a> state.</p>
     </dd>
     <dt><var title="">track</var> . <code title="dom-track-ERROR"><a href="#dom-track-error">ERROR</a></code> (3)</dt>
     <dd>
      <p>The <a href="media-elements.html#text-track-failed-to-load">text track failed to load</a> state.</p>
     </dd>
    </dl></dd>

   <dt><var title="">track</var> . <code title="dom-track-track"><a href="#dom-track-track">track</a></code></dt>

   <dd>

    <p>Returns the <code><a href="media-elements.html#texttrack">TextTrack</a></code> object corresponding to the <a href="media-elements.html#text-track">text track</a> of the <code><a href="#the-track-element">track</a></code> element.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-track-readystate" title="dom-track-readyState"><code>readyState</code></dfn> attribute
  must return the numeric value corresponding to the <a href="media-elements.html#text-track-readiness-state">text track
  readiness state</a> of the <code><a href="#the-track-element">track</a></code> element's
  <a href="media-elements.html#text-track">text track</a>, as defined by the following list:</p>

  <dl><dt><dfn id="dom-track-none" title="dom-track-NONE"><code>NONE</code></dfn> (numeric value 0)</dt>
   <dd>The <a href="media-elements.html#text-track-not-loaded">text track not loaded</a> state.</dd>
   <dt><dfn id="dom-track-loading" title="dom-track-LOADING"><code>LOADING</code></dfn> (numeric value 1)</dt>
   <dd>The <a href="media-elements.html#text-track-loading">text track loading</a> state.</dd>
   <dt><dfn id="dom-track-loaded" title="dom-track-LOADED"><code>LOADED</code></dfn> (numeric value 2)</dt>
   <dd>The <a href="media-elements.html#text-track-loaded">text track loaded</a> state.</dd>
   <dt><dfn id="dom-track-error" title="dom-track-ERROR"><code>ERROR</code></dfn> (numeric value 3)</dt>
   <dd>The <a href="media-elements.html#text-track-failed-to-load">text track failed to load</a> state.</dd>
  </dl><p>The <dfn id="dom-track-track" title="dom-track-track"><code>track</code></dfn> IDL
  attribute must, on getting, return the <code><a href="#the-track-element">track</a></code> element's
  <a href="media-elements.html#text-track">text track</a>'s corresponding <code><a href="media-elements.html#texttrack">TextTrack</a></code>
  object.</p>

  <p>The <dfn id="dom-track-src" title="dom-track-src"><code>src</code></dfn>, <dfn id="dom-track-srclang" title="dom-track-srclang"><code>srclang</code></dfn>, <dfn id="dom-track-label" title="dom-track-label"><code>label</code></dfn>, and <dfn id="dom-track-default" title="dom-track-default"><code>default</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name. The <dfn id="dom-track-kind" title="dom-track-kind"><code>kind</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  </div>

  <div class="example">

   <p>This video has subtitles in several languages:</p>

   <pre>&lt;video src="brave.webm"&gt;
 &lt;track kind=subtitles src=brave.en.vtt srclang=en label="English"&gt;
 &lt;track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing"&gt;
 &lt;track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Fran&#231;ais"&gt;
 &lt;track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch"&gt;
&lt;/video&gt;</pre>

  </div>

<!--TOPIC:Video and Audio-->
  </body></html>
--- NEW FILE: usage-summary.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.28 Usage summary &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-wbr-element.html" title="4.6.27 The wbr element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="edits.html" title="4.7 Edits" 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-wbr-element.html">&#8592; 4.6.27 The wbr element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="edits.html">4.7 Edits &#8594;</a>
  </div>

  <h4 id="usage-summary"><span class="secno">4.6.28 </span>Usage summary</h4>

  <p><i>This section is non-normative.</i></p>
  <table><thead><tr><th>Element
     </th><th>Purpose
     </th><th>Example
   </th></tr></thead><tbody><tr><td><code><a href="the-a-element.html#the-a-element">a</a></code>
     </td><td>Hyperlinks
     </td><td><pre class="example">Visit my <strong>&lt;a href="drinks.html"&gt;drinks&lt;/a&gt;</strong> page.</pre>

    </td></tr><tr><td><code><a href="the-em-element.html#the-em-element">em</a></code>
     </td><td>Stress emphasis
     </td><td><pre class="example">I must say I <strong>&lt;em&gt;adore&lt;/em&gt;</strong> lemonade.</pre>

    </td></tr><tr><td><code><a href="the-strong-element.html#the-strong-element">strong</a></code>
     </td><td>Importance
     </td><td><pre class="example">This tea is <strong>&lt;strong&gt;very hot&lt;/strong&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-small-element.html#the-small-element">small</a></code>
     </td><td>Side comments
     </td><td><pre class="example">These grapes are made into wine. <strong>&lt;small&gt;Alcohol is addictive.&lt;/small&gt;</strong></pre>

    </td></tr><tr><td><code><a href="the-s-element.html#the-s-element">s</a></code>
     </td><td>Inaccurate text
     </td><td><pre class="example">Price: <strong>&lt;s&gt;&#163;4.50&lt;/s&gt;</strong> &#163;2.00!</pre>

    </td></tr><tr><td><code><a href="the-cite-element.html#the-cite-element">cite</a></code>
     </td><td>Titles of works
     </td><td><pre class="example">The case <strong>&lt;cite&gt;Hugo v. Danielle&lt;/cite&gt;</strong> is relevant here.</pre>

    </td></tr><tr><td><code><a href="the-q-element.html#the-q-element">q</a></code>
     </td><td>Quotations
     </td><td><pre class="example">The judge said <strong>&lt;q&gt;You can drink water from the fish tank&lt;/q&gt;</strong> but advised against it.</pre>

    </td></tr><tr><td><code><a href="the-dfn-element.html#the-dfn-element">dfn</a></code>
     </td><td>Defining instance
     </td><td><pre class="example">The term <strong>&lt;dfn&gt;organic food&lt;/dfn&gt;</strong> refers to food produced without synthetic chemicals.</pre>

    </td></tr><tr><td><code><a href="the-abbr-element.html#the-abbr-element">abbr</a></code>
     </td><td>Abbreviations
     </td><td><pre class="example">Organic food in Ireland is certified by the <strong>&lt;abbr title="Irish Organic Farmers and Growers Association"&gt;IOFGA&lt;/abbr&gt;</strong>.</pre>

<!--DATA--><!--FORK-->

    </td></tr><tr><td><code><a href="the-time-element.html#the-time-element">time</a></code>
     </td><td>Machine-readable equivalent of date- or time-related data
     </td><td><pre class="example">Available starting on <strong>&lt;time datetime="2011-11-12"&gt;November 12th&lt;/time&gt;</strong>!</pre>

    </td></tr><tr><td><code><a href="the-code-element.html#the-code-element">code</a></code>
     </td><td>Computer code
     </td><td><pre class="example">The <strong>&lt;code&gt;fruitdb&lt;/code&gt;</strong> program can be used for tracking fruit production.</pre>

    </td></tr><tr><td><code><a href="the-var-element.html#the-var-element">var</a></code>
     </td><td>Variables
     </td><td><pre class="example">If there are <strong>&lt;var&gt;n&lt;/var&gt;</strong> fruit in the bowl, at least <strong>&lt;var&gt;n&lt;/var&gt;</strong>&#247;2 will be ripe.</pre>

    </td></tr><tr><td><code><a href="the-samp-element.html#the-samp-element">samp</a></code>
     </td><td>Computer output
     </td><td><pre class="example">The computer said <strong>&lt;samp&gt;Unknown error -3&lt;/samp&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-kbd-element.html#the-kbd-element">kbd</a></code>
     </td><td>User input
     </td><td><pre class="example">Hit <strong>&lt;kbd&gt;F1&lt;/kbd&gt;</strong> to continue.</pre>

    </td></tr><tr><td><code><a href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a></code>
     </td><td>Subscripts
     </td><td><pre class="example">Water is H<strong>&lt;sub&gt;2&lt;/sub&gt;</strong>O.</pre>

    </td></tr><tr><td><code><a href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></code>
     </td><td>Superscripts
     </td><td><pre class="example">The Hydrogen in heavy water is usually <strong>&lt;sup&gt;2&lt;/sup&gt;</strong>H.</pre>

    </td></tr><tr><td><code><a href="the-i-element.html#the-i-element">i</a></code>
     </td><td>Alternative voice
     </td><td><pre class="example">Lemonade consists primarily of <strong>&lt;i&gt;Citrus limon&lt;/i&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-b-element.html#the-b-element">b</a></code>
     </td><td>Keywords
     </td><td><pre class="example">Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-u-element.html#the-u-element">u</a></code>
     </td><td>Annotations
     </td><td><pre class="example">The mixture of apple juice and <strong>&lt;u class="spelling"&gt;eldeflower&lt;/u&gt;</strong> juice is very pleasant.</pre>

    </td></tr><tr><td><code><a href="the-mark-element.html#the-mark-element">mark</a></code>
     </td><td>Highlight
     </td><td><pre class="example">Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>

    </td></tr><tr><td><code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code>, <code><a href="the-rt-element.html#the-rt-element">rt</a></code>, <code><a href="the-rp-element.html#the-rp-element">rp</a></code>
     </td><td>Ruby annotations
     </td><td><pre class="example"><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>

    </td></tr><tr><td><code><a href="the-bdi-element.html#the-bdi-element">bdi</a></code>
     </td><td>Text directionality isolation
     </td><td><pre class="example">The recommended restaurant is <strong>&lt;bdi lang=""&gt;My Juice Caf&#233; (At The Beach)&lt;/bdi&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-bdo-element.html#the-bdo-element">bdo</a></code>
     </td><td>Text directionality formatting
     </td><td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</strong>"</pre>

    </td></tr><tr><td><code><a href="the-span-element.html#the-span-element">span</a></code>
     </td><td>Other
     </td><td><pre class="example">In French we call it <strong>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</strong>.</pre>

    </td></tr><tr><td><code><a href="the-br-element.html#the-br-element">br</a></code>
     </td><td>Line break
     </td><td><pre class="example">Simply Orange Juice Company<strong><a href="the-br-element.html#the-br-element">&lt;br&gt;</a></strong>Apopka, FL 32703<strong><a href="the-br-element.html#the-br-element">&lt;br&gt;</a></strong>U.S.A.</pre>

    </td></tr><tr><td><code><a href="the-wbr-element.html#the-wbr-element">wbr</a></code>
     </td><td>Line breaking opportunity
     </td><td><pre class="example">www.simply<strong><a href="the-wbr-element.html#the-wbr-element">&lt;wbr&gt;</a></strong>orange<strong><a href="the-wbr-element.html#the-wbr-element">&lt;wbr&gt;</a></strong>juice.com</pre>

  </td></tr></tbody></table></body></html>
--- NEW FILE: sections.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4 Sections &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-noscript-element.html" title="4.3.2 The noscript element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-body-element.html" title="4.4.1 The body 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-noscript-element.html">&#8592; 4.3.2 The noscript element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-body-element.html">4.4.1 The body element &#8594;</a>
  </div>

  <h3 id="sections"><span class="secno">4.4 </span>Sections</h3>

  </body></html>
--- NEW FILE: content-models.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.2.5 Content models &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1216 lines suppressed...]
    <li>The paragraph that says "Use online simulator".</li>

    <li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li>

   </ol><p>The first paragraph is overlapped by the other four. A user
   agent that supports the "cats.sim" resource will only show the
   first one, but a user agent that shows the fallback will
   confusingly show the first sentence of the first paragraph as
   if it was in the same paragraph as the second one, and will show
   the last paragraph as if it was at the start of the second sentence
   of the first paragraph.</p>

   <p>To avoid this confusion, explicit <code><a href="the-p-element.html#the-p-element">p</a></code> elements can be
   used.</p>

  </div>



  </body></html>
--- NEW FILE: the-progress-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.16 The progress element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-output-element.html" title="4.10.15 The output element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-meter-element.html" title="4.10.17 The meter 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-output-element.html">&#8592; 4.10.15 The output element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-meter-element.html">4.10.17 The meter element &#8594;</a>
  </div>

  <h4 id="the-progress-element"><span class="secno">4.10.16 </span>The <dfn><code>progress</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="forms.html#category-label" title="category-label">Labelable 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#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>, but there must be no <code><a href="#the-progress-element">progress</a></code> element 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>
   <dd><code title="attr-progress-value"><a href="#attr-progress-value">value</a></code></dd>
   <dd><code title="attr-progress-max"><a href="#attr-progress-max">max</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="htmlprogresselement">HTMLProgressElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute double <a href="#dom-progress-value" title="dom-progress-value">value</a>;
           attribute double <a href="#dom-progress-max" title="dom-progress-max">max</a>;
  readonly attribute double <a href="#dom-progress-position" title="dom-progress-position">position</a>;
  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-progress-element">progress</a></code> element <a href="rendering.html#represents">represents</a> the
  completion progress of a task. The progress is either indeterminate,
  indicating that progress is being made but that it is not clear how
  much more work remains to be done before the task is complete (e.g.
  because the task is waiting for a remote host to respond), or the
  progress is a number in the range zero to a maximum, giving the
  fraction of work that has so far been completed.</p>

  <p>There are two attributes that determine the current task
  completion represented by the element. The <dfn id="attr-progress-value" title="attr-progress-value"><code>value</code></dfn> attribute
  specifies how much of the task has been completed, and the <dfn id="attr-progress-max" title="attr-progress-max"><code>max</code></dfn> attribute specifies
  how much work the task requires in total. The units are arbitrary
  and not specified.</p>

  <p class="note">To make a determinate progress bar, add a <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute with the current
  progress (either a number from 0.0 to 1.0, or, if the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute is specified, a
  number from 0 to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute). To make an
  indeterminate progress bar, remove the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute.</p>

  <p>Authors are encouraged to also include the current value and the
  maximum value inline as text inside the element, so that the
  progress is made available to users of legacy user agents.</p>

  <div class="example">
   <p>Here is a snippet of a Web application that shows the progress
   of some automated task:</p>
   <pre>&lt;section&gt;
 &lt;h2&gt;Task Progress&lt;/h2&gt;
 &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
 &lt;script&gt;
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 &lt;/script&gt;
&lt;/section&gt;</pre>
   <p>(The <code>updateProgress()</code> method in this example would
   be called by some other code on the page to update the actual
   progress bar as the task progressed.)</p>
  </div>

  <p>The <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> and <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attributes, when present, must
  have values that are <a href="common-microsyntaxes.html#valid-floating-point-number" title="valid floating point number">valid
  floating point numbers</a>. The <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute, if present, must
  have a value equal to or greater than zero, and less than or equal
  to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>
  attribute, if present, or 1.0, otherwise. The <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, if present, must
  have a value greater than zero.</p>

  <p class="note">The <code><a href="#the-progress-element">progress</a></code> element is the wrong
  element to use for something that is just a gauge, as opposed to
  task progress. For instance, indicating disk space usage using
  <code><a href="#the-progress-element">progress</a></code> would be inappropriate. Instead, the
  <code><a href="the-meter-element.html#the-meter-element">meter</a></code> element is available for such use cases.</p>

  <div class="impl">

  <p><strong>User agent requirements</strong>: If the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute is omitted, then
  the progress bar is an indeterminate progress bar. Otherwise, it is
  a determinate progress bar.</p>

  <p>If the progress bar is a determinate progress bar and the element
  has a <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, the user
  agent must parse the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>
  attribute's value according to the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is greater than zero, then the <dfn id="concept-progress-maximum" title="concept-progress-maximum">maximum value</dfn> of the progress
  bar is that value. Otherwise, if the element has no <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, or if it has one but
  parsing it resulted in an error, or if the parsed value was less
  than or equal to zero, then the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a> of the
  progress bar is 1.0.</p>

  <p>If the progress bar is a determinate progress bar, user agents
  must parse the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code>
  attribute's value according to the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is less than the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a> and greater
  than zero, then the <dfn id="concept-progress-value" title="concept-progress-value">current
  value</dfn> of the progress bar is that parsed value. Otherwise, if
  the parsed value was greater than or equal to the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>, then the
  <a href="#concept-progress-value" title="concept-progress-value">current value</a> of the
  progress bar is the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum
  value</a> of the progress bar. Otherwise, if parsing the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute's value resulted
  in an error, or a number less than or equal to zero, then the <a href="#concept-progress-value" title="concept-progress-value">current value</a> of the
  progress bar is zero.</p>

  <p><strong>UA requirements for showing the progress bar</strong>:
  When representing a <code><a href="#the-progress-element">progress</a></code> element to the user, the
  UA should indicate whether it is a determinate or indeterminate
  progress bar, and in the former case, should indicate the relative
  position of the <a href="#concept-progress-value" title="concept-progress-value">current
  value</a> relative to the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>.</p>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">progress</var> . <code title="dom-progress-position"><a href="#dom-progress-position">position</a></code></dt>

   <dd>

    <p>For a determinate progress bar (one with known current and
    maximum values), returns the result of dividing the current value
    by the maximum value.</p>

    <p>For an indeterminate progress bar, returns &#8722;1.</p>

   </dd>

  </dl><div class="impl">

  <p>If the progress bar is an indeterminate progress bar, then the
  <dfn id="dom-progress-position" title="dom-progress-position"><code>position</code></dfn> IDL
  attribute must return &#8722;1. Otherwise, it must return the
  result of dividing the <a href="#concept-progress-value" title="concept-progress-value">current value</a> by the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>.</p>

  <p>If the progress bar is an indeterminate progress bar, then the
  <dfn id="dom-progress-value" title="dom-progress-value"><code>value</code></dfn> IDL
  attribute, on getting, must return 0. Otherwise, it must return the
  <a href="#concept-progress-value" title="concept-progress-value">current value</a>. On
  setting, the given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best
  representation of the number as a floating point number</a> and
  then the <code title="dom-progress-value"><a href="#dom-progress-value">value</a></code> content
  attribute must be set to that string.</p>

  <p class="note">Setting the <code title="dom-progress-value"><a href="#dom-progress-value">value</a></code> IDL attribute to itself when
  the corresponding content attribute is absent would change the
  progress bar from an indeterminate progress bar to a determinate
  progress bar with no progress.</p>

  <p>The <dfn id="dom-progress-max" title="dom-progress-max"><code>max</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-numbers-greater-than-zero">limited to numbers greater than zero</a>. The
  default value for <code title="dom-progress-max"><a href="#dom-progress-max">max</a></code> is
  1.0.</p>

  <p>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.</p>

  </div>
<!--TOPIC:HTML-->



  </body></html>
--- NEW FILE: the-footer-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.9 The footer element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-header-element.html" title="4.4.8 The header element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-address-element.html" title="4.4.10 The address 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-header-element.html">&#8592; 4.4.8 The header element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-address-element.html">4.4.10 The address element &#8594;</a>
  </div>

  <h4 id="the-footer-element"><span class="secno">4.4.9 </span>The <dfn><code>footer</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#flow-content-1">Flow content</a>, but with no <code><a href="the-header-element.html#the-header-element">header</a></code> or
   <code><a href="#the-footer-element">footer</a></code> element 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-footer-element">footer</a></code> element <a href="rendering.html#represents">represents</a> a footer
  for its nearest ancestor <a href="content-models.html#sectioning-content-0">sectioning content</a> or
  <a href="headings-and-sections.html#sectioning-root">sectioning root</a> element. A footer typically contains
  information about its section such as who wrote it, links to related
  documents, copyright data, and the like.</p>

  <p>When the <code><a href="#the-footer-element">footer</a></code> element contains entire sections,
  they <a href="rendering.html#represents" title="represents">represent</a> appendices, indexes,
  long colophons, verbose license agreements, and other such
  content.</p>

  <p class="note">Contact information for the author or editor of a
  section belongs in an <code><a href="the-address-element.html#the-address-element">address</a></code> element, possibly itself
  inside a <code><a href="#the-footer-element">footer</a></code>. Bylines and other information that
  could be suitable for both a <code><a href="the-header-element.html#the-header-element">header</a></code> or a
  <code><a href="#the-footer-element">footer</a></code> can be placed in either (or neither). The
  primary purpose of these elements is merely to help the author write
  self-explanatory markup that is easy to maintain and style; they are
  not intended to impose specific structures on authors.</p>

  <p>Footers don't necessarily have to appear at the <em>end</em> of a
  section, though they usually do.</p>

  <p>When the nearest ancestor <a href="content-models.html#sectioning-content-0">sectioning content</a> or
  <a href="headings-and-sections.html#sectioning-root">sectioning root</a> element is <a href="dom.html#the-body-element-0">the body
  element</a>, then it applies to the whole page.</p>

  <p class="note">The <code><a href="#the-footer-element">footer</a></code> element is not
  <a href="content-models.html#sectioning-content-0">sectioning content</a>; it doesn't introduce a new
  section.</p>

  <div class="example">

   <p>Here is a page with two footers, one at the top and one at the
   bottom, with the same content:</p>

   <pre>&lt;body&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
  &lt;h2&gt;The ipsum of all lorems&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>

  <div class="example">

   <p>Here is an example which shows the <code><a href="#the-footer-element">footer</a></code> element
   being used both for a site-wide footer and for a section
   footer.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;&lt;HEAD&gt;
&lt;TITLE&gt;The Ramblings of a Scientist&lt;/TITLE&gt;
&lt;BODY&gt;
&lt;H1&gt;The Ramblings of a Scientist&lt;/H1&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;Episode 15&lt;/H1&gt;
 &lt;VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD&gt;
  &lt;P&gt;&lt;A HREF="/fm/015.ogv"&gt;Download video&lt;/A&gt;.&lt;/P&gt;
 &lt;/VIDEO&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME DATETIME="2009-10-21T18:26-07:00"&gt;on 2009/10/21 at 6:26pm&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;My Favorite Trains&lt;/H1&gt;
 &lt;P&gt;I love my trains. My favorite train of all time is a K&#246;f.&lt;/P&gt;
 &lt;P&gt;It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.&lt;/P&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME DATETIME="2009-09-15T14:54-07:00"&gt;on 2009/09/15 at 2:54pm&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;FOOTER&gt; &lt;!-- site wide footer --&gt;
 &lt;NAV&gt;
  &lt;P&gt;&lt;A HREF="/credits.html"&gt;Credits&lt;/A&gt; &#8212;
     &lt;A HREF="/tos.html"&gt;Terms of Service&lt;/A&gt; &#8212;
     &lt;A HREF="/index.html"&gt;Blog Index&lt;/A&gt;&lt;/P&gt;
 &lt;/NAV&gt;
 &lt;P&gt;Copyright &#169; 2009 Gordon Freeman&lt;/P&gt;
&lt;/FOOTER&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;</pre>

  </div>

  <div class="example">

   <p>Some site designs have what is sometimes referred to as "fat
   footers" &#8212; footers that contain a lot of material, including
   images, links to other articles, links to pages for sending
   feedback, special offers... in some ways, a whole "front page" in
   the footer.</p>

   <p>This fragment shows the bottom of a page on a site with a "fat
   footer":</p>

   <pre>...
 &lt;footer&gt;
  &lt;nav&gt;
   &lt;section&gt;
    &lt;h1&gt;Articles&lt;/h1&gt;
    &lt;p&gt;&lt;img src="images/somersaults.jpeg" alt=""&gt; Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. &lt;a href="articles/somersaults/1"&gt;Part
    1&lt;/a&gt; &#183; &lt;a href="articles/somersaults/1"&gt;Part 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;img src="images/kindplus.jpeg"&gt; Tired of walking on the edge of
    a clif&lt;!-- sic --&gt;? Our guest writer Lara shows you how to bumble
    your way through the bars. &lt;a href="articles/kindplus/1"&gt;Read
    more...&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;img src="images/crisps.jpeg"&gt; The chips are down, now all
    that's left is a potato. What can you do with it? &lt;a
    href="articles/crisps/1"&gt;Read more...&lt;/a&gt;&lt;/p&gt;
   &lt;/section&gt;
   &lt;ul&gt;
    &lt;li&gt; &lt;a href="/about"&gt;About us...&lt;/a&gt;
    &lt;li&gt; &lt;a href="/feedback"&gt;Send feedback!&lt;/a&gt;
    &lt;li&gt; &lt;a href="/sitemap"&gt;Sitemap&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;p&gt;&lt;small&gt;Copyright &#169; 2015 The Snacker &#8212;
  &lt;a href="/tos"&gt;Terms of Service&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: interactions-with-xpath-and-xslt.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.3 Interactions with XPath and XSLT &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="wai-aria.html" title="3.2.7 WAI-ARIA" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="dynamic-markup-insertion.html" title="3.4 Dynamic markup insertion" 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="wai-aria.html">&#8592; 3.2.7 WAI-ARIA</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="dynamic-markup-insertion.html">3.4 Dynamic markup insertion &#8594;</a>
  </div>

  <div class="impl">

  <h3 id="interactions-with-xpath-and-xslt"><span class="secno">3.3 </span>Interactions with XPath and XSLT</h3>

  <p id="xpath-1.0-processors">Implementations of XPath 1.0 that
  operate on <a href="infrastructure.html#html-documents">HTML documents</a> parsed or created in the
  manners described in this specification (e.g. as part of the <code title="">document.evaluate()</code> API) must act as if the
  following edit was applied to the XPath 1.0 specification.</p>

  <p>First, remove this paragraph:</p>

  <blockquote cite="http://www.w3.org/TR/1999/REC-xpath-19991116#node-tests">

   <p>A <a href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> in the
   node test is expanded into an <a href="http://www.w3.org/TR/1999/REC-xpath-19991116#dt-expanded-name">expanded-name</a>
   using the namespace declarations from the expression context.  This
   is the same way expansion is done for element type names in start
   and end-tags except that the default namespace declared with <code title="">xmlns</code> is not used: if the <a href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> does
   not have a prefix, then the namespace URI is null (this is the same
   way attribute names are expanded).  It is an error if the <a href="http://www.w3.org/TR/REC-xml-names#NT-QName">QName</a> has a
   prefix for which there is no namespace declaration in the
   expression context.</p>

  </blockquote>

  <p>Then, insert in its place the following:</p>

  <blockquote cite="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7059#c37">

   <p>A QName in the node test is expanded into an expanded-name using
   the namespace declarations from the expression context. If the
   QName has a prefix, then there must be a<!-- added 2009-10-27 -
   http://www.w3.org/Bugs/Public/show_bug.cgi?id=8062 --> namespace
   declaration for this prefix in the expression context, and the
   corresponding<!-- typo fixed 2009-10-27 -
   http://www.w3.org/Bugs/Public/show_bug.cgi?id=8063 --> namespace
   URI is the one that is associated with this prefix.  It is an error
   if the QName has a prefix for which there is no namespace
   declaration in the expression context. </p>

   <p>If the QName has no prefix and the principal node type of the
   axis is element, then the default element namespace is
   used. Otherwise if the QName has no prefix, the namespace URI is
   null. The default element namespace is a member of the context for
   the XPath expression. The value of the default element namespace
   when executing an XPath expression through the DOM3 XPath API is
   determined in the following way:</p>

   <ol><li>If the context node is from an HTML DOM, the default element
    namespace is "http://www.w3.org/1999/xhtml".</li>

    <li>Otherwise, the default element namespace URI is null.</li>

   </ol><p class="note">This is equivalent to adding the default element
   namespace feature of XPath 2.0 to XPath 1.0, and using the HTML
   namespace as the default element namespace for HTML documents. It
   is motivated by the desire to have implementations be compatible
   with legacy HTML content while still supporting the changes that
   this specification introduces to HTML regarding the namespace used
   for HTML elements, and by the desire to use XPath 1.0 rather than
   XPath 2.0.</p>

  </blockquote>

  <p class="note">This change is a <a href="introduction.html#willful-violation">willful violation</a> of
  the XPath 1.0 specification, motivated by desire to have
  implementations be compatible with legacy content while still
  supporting the changes that this specification introduces to HTML
  regarding which namespace is used for HTML elements. <a href="references.html#refsXPATH10">[XPATH10]</a></p> <!-- note: version matters for
  this ref -->

  <hr><p id="dom-based-xslt-1.0-processors">XSLT 1.0 processors outputting
  to a DOM when the output method is "html" (either explicitly or via
  the defaulting rule in XSLT 1.0) are affected as follows:</p>

  <p>If the transformation program outputs an element in no namespace,
  the processor must, prior to constructing the corresponding DOM
  element node, change the namespace of the element to the <a href="namespaces.html#html-namespace-0">HTML
  namespace</a>, <a href="infrastructure.html#converted-to-ascii-lowercase" title="converted to ASCII
  lowercase">ASCII-lowercase</a> the element's local name, and
  <a href="infrastructure.html#converted-to-ascii-lowercase" title="converted to ASCII lowercase">ASCII-lowercase</a>
  the names of any non-namespaced attributes on the element.</p>

  <p class="note">This requirement is a <a href="introduction.html#willful-violation">willful violation</a>
  of the XSLT 1.0 specification, required because this specification
  changes the namespaces and case-sensitivity rules of HTML in a
  manner that would otherwise be incompatible with DOM-based XSLT
  transformations. (Processors that serialize the output are
  unaffected.) <a href="references.html#refsXSLT10">[XSLT10]</a></p> <!-- note:
  version matters for this ref -->

  <p class="note">There are also additional comments regarding the
  interaction of XSLT and HTML <a href="the-script-element.html#scriptTagXSLT">in the
  <code>script</code> element section</a>.</p>

  </div>



<!--TOPIC:HTML Syntax and Parsing-->
  </body></html>
--- NEW FILE: the-dd-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.10 The dd element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-dt-element.html" title="4.5.9 The dt element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-figure-element.html" title="4.5.11 The figure 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-dt-element.html">&#8592; 4.5.9 The dt element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-figure-element.html">4.5.11 The figure element &#8594;</a>
  </div>

  <h4 id="the-dd-element"><span class="secno">4.5.10 </span>The <dfn><code>dd</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>After <code><a href="the-dt-element.html#the-dt-element">dt</a></code> or <code><a href="#the-dd-element">dd</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>.</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-dd-element">dd</a></code> element <a href="rendering.html#represents">represents</a> the
  description, definition, or value, 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>

  <div class="example">

   <p>A <code><a href="the-dl-element.html#the-dl-element">dl</a></code> can be used to define a vocabulary list, like
   in a dictionary. In the following example, each entry, given by a
   <code><a href="the-dt-element.html#the-dt-element">dt</a></code> with a <code><a href="the-dfn-element.html#the-dfn-element">dfn</a></code>, has several
   <code><a href="#the-dd-element">dd</a></code>s, showing the various parts of the definition.</p>

   <!-- the actual pronunciations below are nonsense. -->
   <pre>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;happiness&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/'h&#230; p. nes/&lt;/dd&gt;
 &lt;dd class="part-of-speech"&gt;&lt;i&gt;&lt;abbr&gt;n.&lt;/abbr&gt;&lt;/i&gt;&lt;/dd&gt;
 &lt;dd&gt;The state of being happy.&lt;/dd&gt;
 &lt;dd&gt;Good fortune; success. &lt;q&gt;Oh &lt;b&gt;happiness&lt;/b&gt;! It worked!&lt;/q&gt;&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;rejoice&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/ri jois'/&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.intr.&lt;/abbr&gt;&lt;/i&gt; To be delighted oneself.&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.tr.&lt;/abbr&gt;&lt;/i&gt; To cause one to be delighted.&lt;/dd&gt;
&lt;/dl&gt;</pre>
  </div>


  </body></html>
--- NEW FILE: the-bdo-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.24 The bdo element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-bdi-element.html" title="4.6.23 The bdi element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-span-element.html" title="4.6.25 The span 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-bdi-element.html">&#8592; 4.6.23 The bdi element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-span-element.html">4.6.25 The span element &#8594;</a>
  </div>

  <h4 id="the-bdo-element"><span class="secno">4.6.24 </span>The <dfn><code>bdo</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-bdo-element">bdo</a></code> element <a href="rendering.html#represents">represents</a> explicit
  text directionality formatting control for its children. It allows
  authors to override the Unicode bidirectional algorithm by
  explicitly specifying a direction override. <a href="references.html#refsBIDI">[BIDI]</a></p>

  <p>Authors must specify the <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code>
  attribute on this element, with the value <code>ltr</code> to
  specify a left-to-right override and with the value <code>rtl</code>
  to specify a right-to-left override.</p>

  <div class="impl">

  <p>If the element's <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> attribute is
  in the <i title="attr-dir-rtl-state"><a href="global-attributes.html#attr-dir-rtl-state">rtl</a></i> state, then for the
  purposes of the bidirectional algorithm, the user agent must act as
  if there was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start
  of the element, and a U+202C POP DIRECTIONAL FORMATTING at the end
  of the element.</p>

  <p>If the element's <code title="attr-dir"><a href="global-attributes.html#the-dir-attribute">dir</a></code> attribute is
  in the <i title="attr-dir-ltr-state"><a href="global-attributes.html#attr-dir-ltr-state">ltr</a></i>, then for the purposes
  of the bidirectional algorithm, the user agent must act as if there
  was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
  element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
  element.</p>

  <p>The requirements on handling the <code><a href="#the-bdo-element">bdo</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>



  </body></html>
--- NEW FILE: the-object-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.4 The object element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1102 lines suppressed...]
   using user agents that support <code><a href="the-video-element.html#the-video-element">video</a></code>, and finally
   providing a link to the video for those who have neither Flash nor
   a <code><a href="the-video-element.html#the-video-element">video</a></code>-capable browser.</p>

   <pre>&lt;p&gt;Look at my video:
 &lt;object type="application/x-shockwave-flash"&gt;
  &lt;param name=movie value="http://video.example.com/library/watch.swf"&gt;
  &lt;param name=allowfullscreen value=true&gt;
  &lt;param name=flashvars value="http://video.example.com/vids/315981"&gt;
  &lt;video controls src="http://video.example.com/vids/315981"&gt;
   &lt;a href="http://video.example.com/vids/315981"&gt;View video&lt;/a&gt;.
  &lt;/video&gt;
 &lt;/object&gt;
&lt;/p&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: the-ol-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5.5 The ol element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-blockquote-element.html" title="4.5.4 The blockquote element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-ul-element.html" title="4.5.6 The ul 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-blockquote-element.html">&#8592; 4.5.4 The blockquote element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-ul-element.html">4.5.6 The ul element &#8594;</a>
  </div>

  <h4 id="the-ol-element"><span class="secno">4.5.5 </span>The <dfn><code>ol</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>If the element's children include at least one <code><a href="the-li-element.html#the-li-element">li</a></code> element: <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>Zero or more <code><a href="the-li-element.html#the-li-element">li</a></code> elements.</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-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code></dd>
   <dd><code title="attr-ol-start"><a href="#attr-ol-start">start</a></code></dd>
   <dd><code title="attr-ol-type"><a href="#attr-ol-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="htmlolistelement">HTMLOListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-ol-reversed" title="dom-ol-reversed">reversed</a>;
           attribute long <a href="#dom-ol-start" title="dom-ol-start">start</a>;
           attribute DOMString <a href="#dom-ol-type" title="dom-ol-type">type</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-ol-element">ol</a></code> element <a href="rendering.html#represents">represents</a> a list of
  items, where the items have been intentionally ordered, such that
  changing the order would change the meaning of the document.</p>

  <p>The items of the list are the <code><a href="the-li-element.html#the-li-element">li</a></code> element child nodes
  of the <code><a href="#the-ol-element">ol</a></code> element, in <a href="infrastructure.html#tree-order">tree order</a>.</p>

  <p>The <dfn id="attr-ol-reversed" title="attr-ol-reversed"><code>reversed</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If present, it
  indicates that the list is a descending list (..., 3, 2, 1). If the
  attribute is omitted, the list is an ascending list (1, 2, 3,
  ...).</p>

  <p>The <dfn id="attr-ol-start" title="attr-ol-start"><code>start</code></dfn>
  attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving
  the <a href="the-li-element.html#ordinal-value">ordinal value</a> of the first list item.</p>

  <div class="impl">

  <p>If the <code title="attr-ol-start"><a href="#attr-ol-start">start</a></code> attribute is
  present, user agents must <a href="common-microsyntaxes.html#rules-for-parsing-integers" title="rules for parsing
  integers">parse it as an integer</a>, in order to determine the
  attribute's value. The default value, used if the attribute is
  missing or if the value cannot be converted to a number according to
  the referenced algorithm, is 1 if the element has no <code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code> attribute, and is the
  number of child <code><a href="the-li-element.html#the-li-element">li</a></code> elements otherwise.</p>

  <p>The first item in the list has the <a href="the-li-element.html#ordinal-value">ordinal value</a>
  given by the <code><a href="#the-ol-element">ol</a></code> element's <code title="attr-ol-start"><a href="#attr-ol-start">start</a></code> attribute, unless that
  <code><a href="the-li-element.html#the-li-element">li</a></code> element has a <code title="attr-li-value"><a href="the-li-element.html#attr-li-value">value</a></code> attribute with a value that can
  be successfully parsed, in which case it has the <a href="the-li-element.html#ordinal-value">ordinal
  value</a> given by that <code title="attr-li-value"><a href="the-li-element.html#attr-li-value">value</a></code>
  attribute.</p>

  <p>Each subsequent item in the list has the <a href="the-li-element.html#ordinal-value">ordinal
  value</a> given by its <code title="attr-li-value"><a href="the-li-element.html#attr-li-value">value</a></code>
  attribute, if it has one, or, if it doesn't, the <a href="the-li-element.html#ordinal-value">ordinal
  value</a> of the previous item, plus one if the <code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code> is absent, or minus one if
  it is present.</p>

  </div>

  <p>The <dfn id="attr-ol-type" title="attr-ol-type"><code>type</code></dfn> attribute
  can be used to specify the kind of marker to use in the list, in the
  cases where that matters (e.g. because items are to be referenced by
  their number/letter). The attribute, if specified, must have a value
  that is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match for one of the
  characters given in the first cell of one of the rows of the
  following table. <span class="impl">The <code title="attr-ol-type"><a href="#attr-ol-type">type</a></code> attribute represents the state
  given in the cell in the second column of the row whose first cell
  matches the attribute's value; if none of the cells match, or if the
  attribute is omitted, then the attribute represents the <a href="#attr-ol-type-state-decimal" title="attr-ol-type-state-decimal">decimal</a> state.</span></p>

  <table><thead><tr><th>Keyword
     </th><th>State
     </th><th>Description
     </th><th colspan="8">Examples for values 1-3 and 3999-4001
   </th></tr></thead><tbody><tr><td><dfn id="attr-ol-type-keyword-decimal" title="attr-ol-type-keyword-decimal"><code>1</code></dfn> (U+0031)
     </td><td><dfn id="attr-ol-type-state-decimal" title="attr-ol-type-state-decimal">decimal</dfn>
     </td><td>Decimal numbers
     </td><td class="eg"><samp>1.</samp> </td><td class="eg"><samp>2.</samp> </td><td class="eg"><samp>3.</samp> </td><td class="eg">... </td><td class="eg"><samp>3999.</samp> </td><td class="eg"><samp>4000.</samp> </td><td class="eg"><samp>4001.</samp> </td><td class="eg">...
    </td></tr><tr><td><dfn id="attr-ol-type-keyword-lower-alpha" title="attr-ol-type-keyword-lower-alpha"><code>a</code></dfn> (U+0061)
     </td><td><dfn id="attr-ol-type-state-lower-alpha" title="attr-ol-type-state-lower-alpha">lower-alpha</dfn>
     </td><td>Lowercase latin alphabet
     </td><td class="eg"><samp><a href="the-a-element.html#the-a-element">a.</a></samp> </td><td class="eg"><samp><a href="the-b-element.html#the-b-element">b.</a></samp> </td><td class="eg"><samp>c.</samp> </td><td class="eg">... </td><td class="eg"><samp>ewu.</samp> </td><td class="eg"><samp>ewv.</samp> </td><td class="eg"><samp>eww.</samp> </td><td class="eg">...
    </td></tr><tr><td><dfn id="attr-ol-type-keyword-upper-alpha" title="attr-ol-type-keyword-upper-alpha"><code>A</code></dfn> (U+0041)
     </td><td><dfn id="attr-ol-type-state-upper-alpha" title="attr-ol-type-state-upper-alpha">upper-alpha</dfn>
     </td><td>Uppercase latin alphabet
     </td><td class="eg"><samp><a href="the-a-element.html#the-a-element">A.</a></samp> </td><td class="eg"><samp><a href="the-b-element.html#the-b-element">B.</a></samp> </td><td class="eg"><samp>C.</samp> </td><td class="eg">... </td><td class="eg"><samp>EWU.</samp> </td><td class="eg"><samp>EWV.</samp> </td><td class="eg"><samp>EWW.</samp> </td><td class="eg">...
    </td></tr><tr><td><dfn id="attr-ol-type-keyword-lower-roman" title="attr-ol-type-keyword-lower-roman"><code>i</code></dfn> (U+0069)
     </td><td><dfn id="attr-ol-type-state-lower-roman" title="attr-ol-type-state-lower-roman">lower-roman</dfn>
     </td><td>Lowercase roman numerals
     </td><td class="eg"><samp><a href="the-i-element.html#the-i-element">i.</a></samp> </td><td class="eg"><samp>ii.</samp> </td><td class="eg"><samp>iii.</samp> </td><td class="eg">... </td><td class="eg"><samp>mmmcmxcix.</samp> </td><td class="eg"><samp>i&#773;v&#773;.</samp> </td><td class="eg"><samp>i&#773;v&#773;i.</samp> </td><td class="eg">...
    </td></tr><tr><td><dfn id="attr-ol-type-keyword-upper-roman" title="attr-ol-type-keyword-upper-roman"><code>I</code></dfn> (U+0049)
     </td><td><dfn id="attr-ol-type-state-upper-roman" title="attr-ol-type-state-upper-roman">upper-roman</dfn>
     </td><td>Uppercase roman numerals
     </td><td class="eg"><samp><a href="the-i-element.html#the-i-element">I.</a></samp> </td><td class="eg"><samp>II.</samp> </td><td class="eg"><samp>III.</samp> </td><td class="eg">... </td><td class="eg"><samp>MMMCMXCIX.</samp> </td><td class="eg"><samp>I&#773;V&#773;.</samp> </td><td class="eg"><samp>I&#773;V&#773;I.</samp> </td><td class="eg">...
  </td></tr></tbody></table><div class="impl">

  <p>User agents should render the items of the list in a manner
  consistent with the state of the <code title="attr-ol-type"><a href="#attr-ol-type">type</a></code> attribute of the <code><a href="#the-ol-element">ol</a></code>
  element. Numbers less than or equal to zero should always use the
  decimal system regardless of the <code title="attr-ol-type"><a href="#attr-ol-type">type</a></code> attribute.</p>

  <p class="note">For CSS user agents, a mapping for this attribute to
  the 'list-style-type' CSS property is given <a href="rendering.html#decohints">in
  the rendering section</a> (the mapping is straightforward: the
  states above have the same names as their corresponding CSS
  values).</p>

  </div>

  <!-- v2: resuming numbering of lists from previous lists? -->

  <div class="impl">

  <p>The <dfn id="dom-ol-reversed" title="dom-ol-reversed"><code>reversed</code></dfn>,
  <dfn id="dom-ol-start" title="dom-ol-start"><code>start</code></dfn>, and <dfn id="dom-ol-type" title="dom-ol-type"><code>type</code></dfn> IDL attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name. The <code title="dom-ol-start"><a href="#dom-ol-start">start</a></code> IDL attribute has
  the same default as its content attribute.</p>

  </div>

  <div class="example">

   <p>The following markup shows a list where the order matters, and
   where the <code><a href="#the-ol-element">ol</a></code> element is therefore appropriate. Compare
   this list to the equivalent list in the <code><a href="the-ul-element.html#the-ul-element">ul</a></code> section to
   see an example of the same items using the <code><a href="the-ul-element.html#the-ul-element">ul</a></code>
   element.</p>

   <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</pre>

   <p>Note how changing the order of the list changes the meaning of
   the document. In the following example, changing the relative order
   of the first two items has changed the birthplace of the
   author:</p>

   <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;United Kingdom
 &lt;li&gt;Switzerland
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-area-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.13 The area element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-map-element.html" title="4.8.12 The map element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="image-maps.html" title="4.8.14 Image maps" 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-map-element.html">&#8592; 4.8.12 The map element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="image-maps.html">4.8.14 Image maps &#8594;</a>
  </div>

  <h4 id="the-area-element"><span class="secno">4.8.13 </span>The <dfn><code>area</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>
   <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, but only if there is a <code><a href="the-map-element.html#the-map-element">map</a></code> element ancestor.</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-area-alt"><a href="#attr-area-alt">alt</a></code></dd>
   <dd><code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code></dd>
   <dd><code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code></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="htmlareaelement">HTMLAreaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-area-alt" title="dom-area-alt">alt</a>;
           attribute DOMString <a href="#dom-area-coords" title="dom-area-coords">coords</a>;
           attribute DOMString <a href="#dom-area-shape" title="dom-area-shape">shape</a>;
  stringifier attribute DOMString <a href="#dom-area-href" title="dom-area-href">href</a>;
           attribute DOMString <a href="#dom-area-target" title="dom-area-target">target</a>;
<!--DOWNLOAD--><!--PING-->
           attribute DOMString <a href="#dom-area-rel" title="dom-area-rel">rel</a>;
  readonly attribute <a href="infrastructure.html#domtokenlist">DOMTokenList</a> <a href="#dom-area-rellist" title="dom-area-relList">relList</a>;
           attribute DOMString <a href="#dom-area-media" title="dom-area-media">media</a>;
           attribute DOMString <a href="#dom-area-hreflang" title="dom-area-hreflang">hreflang</a>;
           attribute DOMString <a href="#dom-area-type" title="dom-area-type">type</a>;

  // <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
           attribute DOMString <a href="#dom-area-protocol" title="dom-area-protocol">protocol</a>;
           attribute DOMString <a href="#dom-area-host" title="dom-area-host">host</a>;
           attribute DOMString <a href="#dom-area-hostname" title="dom-area-hostname">hostname</a>;
           attribute DOMString <a href="#dom-area-port" title="dom-area-port">port</a>;
           attribute DOMString <a href="#dom-area-pathname" title="dom-area-pathname">pathname</a>;
           attribute DOMString <a href="#dom-area-search" title="dom-area-search">search</a>;
           attribute DOMString <a href="#dom-area-hash" title="dom-area-hash">hash</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-area-element">area</a></code> element <a href="rendering.html#represents">represents</a> either a
  hyperlink with some text and a corresponding area on an <a href="image-maps.html#image-map">image
  map</a>, or a dead area on an image map.</p>

  <p>If the <code><a href="#the-area-element">area</a></code> element has an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the
  <code><a href="#the-area-element">area</a></code> element represents a <a href="links.html#hyperlink">hyperlink</a>. In
  this case, the <dfn id="attr-area-alt" title="attr-area-alt"><code>alt</code></dfn>
  attribute must be present. It specifies the text of the
  hyperlink. Its value must be text that, when presented with the
  texts specified for the other hyperlinks of the <a href="image-maps.html#image-map">image
  map</a>, and with the alternative text of the image, but without
  the image itself, provides the user with the same kind of choice as
  the hyperlink would when used without its text but with its shape
  applied to the image. The <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
  attribute may be left blank if there is another <code><a href="#the-area-element">area</a></code>
  element in the same <a href="image-maps.html#image-map">image map</a> that points to the same
  resource and has a non-blank <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
  attribute.</p>

  <p>If the <code><a href="#the-area-element">area</a></code> element has no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the area
  represented by the element cannot be selected, and the <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute must be omitted.</p>

  <p>In both cases, the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> and
  <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attributes specify the
  area.</p>

  <p>The <dfn id="attr-area-shape" title="attr-area-shape"><code>shape</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The states
  given in the first cell of the rows with keywords give the states to
  which those keywords map. <span class="impl">Some of the keywords
  are non-conforming, as noted in the last column.</span></p>

  <table><thead><tr><th>State
     </th><th>Keywords
     </th><th class="impl">Notes
   </th></tr></thead><tbody><tr><td rowspan="2"><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
     </td><td><dfn id="attr-area-shape-keyword-circle" title="attr-area-shape-keyword-circle"><code>circle</code></dfn>
     </td><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-circ" title="attr-area-shape-keyword-circ"><code>circ</code></dfn>
     </td><td class="impl">Non-conforming
    </td></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
     </td><td><dfn id="attr-area-shape-keyword-default" title="attr-area-shape-keyword-default"><code>default</code></dfn>
     </td><td class="impl">
    </td></tr><tr><td rowspan="2"><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
     </td><td><dfn id="attr-area-shape-keyword-poly" title="attr-area-shape-keyword-poly"><code>poly</code></dfn>
     </td><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-polygon" title="attr-area-shape-keyword-polygon"><code>polygon</code></dfn>
     </td><td class="impl">Non-conforming
    </td></tr><tr><td rowspan="2"><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
     </td><td><dfn id="attr-area-shape-keyword-rect" title="attr-area-shape-keyword-rect"><code>rect</code></dfn>
     </td><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-rectangle" title="attr-area-shape-keyword-rectangle"><code>rectangle</code></dfn>
     </td><td class="impl">Non-conforming
  </td></tr></tbody></table><p>The attribute may be omitted. The <i>missing value default</i> is
  the <a href="#attr-area-shape-rect" title="attr-area-shape-rect">rectangle</a> state.</p>

  <p>The <dfn id="attr-area-coords" title="attr-area-coords"><code>coords</code></dfn>
  attribute must, if specified, contain a <a href="common-microsyntaxes.html#valid-list-of-integers">valid list of
  integers</a>. This attribute gives the coordinates for the shape
  described by the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
  attribute. <span class="impl">The processing for this attribute is
  described as part of the <a href="image-maps.html#image-map">image map</a> processing
  model.</span></p>

  <!-- v2: It was suggested by John S. Urban that coords should
  support percentages as well as pixels, so that one could use the
  same image map for images of various sizes. -->

  <p>In the <dfn id="attr-area-shape-circle" title="attr-area-shape-circle">circle state</dfn>,
  <code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attribute present, with three
  integers, the last of which must be non-negative. The first integer
  must be the distance in CSS pixels from the left edge of the image
  to the center of the circle, the second integer must be the distance
  in CSS pixels from the top edge of the image to the center of the
  circle, and the third integer must be the radius of the circle,
  again in CSS pixels.</p>

  <p>In the <dfn id="attr-area-shape-default" title="attr-area-shape-default">default state</dfn>
  state, <code><a href="#the-area-element">area</a></code> elements must not have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attribute. (The area is the
  whole image.)</p>

  <p>In the <dfn id="attr-area-shape-poly" title="attr-area-shape-poly">polygon state</dfn>,
  <code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attribute with at least six
  integers, and the number of integers must be even. Each pair of
  integers must represent a coordinate given as the distances from the
  left and the top of the image in CSS pixels respectively, and all
  the coordinates together must represent the points of the polygon,
  in order.</p>

  <p>In the <dfn id="attr-area-shape-rect" title="attr-area-shape-rect">rectangle state</dfn>,
  <code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attribute with exactly four
  integers, the first of which must be less than the third, and the
  second of which must be less than the fourth. The four points must
  represent, respectively, the distance from the left edge of the
  image to the left side of the rectangle, the distance from the
  top edge to the top side, the distance from the left edge to the
  right side, and the distance from the top edge to the bottom side,
  all in CSS pixels.</p>

  <div class="impl">

  <p>When user agents allow users to <a href="links.html#following-hyperlinks-0" title="following
  hyperlinks">follow hyperlinks</a>
<!--DOWNLOAD-->
  created using the <code><a href="#the-area-element">area</a></code> element, as described in the
  next section, 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 decide how the link is followed.
  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>

  </div>

  <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="impl">

  <p>The <a href="content-models.html#activation-behavior">activation behavior</a> of <code><a href="#the-area-element">area</a></code>
  elements is to run the following steps:</p>

  <ol><li><p>If the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event in
   question is not <a href="infrastructure.html#concept-events-trusted" title="concept-events-trusted">trusted</a>
   (i.e. a <code title="dom-click"><a href="editing.html#dom-click">click()</a></code> method call was the
   reason for the event being dispatched), and the <code><a href="#the-area-element">area</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>Otherwise, 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-area-element">area</a></code> element, if any, and as determined by
<!--DOWNLOAD-->
   any expressed user preference.</p></li>

  </ol><p>The IDL attributes <dfn id="dom-area-alt" title="dom-area-alt"><code>alt</code></dfn>, <dfn id="dom-area-coords" title="dom-area-coords"><code>coords</code></dfn>, <dfn id="dom-area-href" title="dom-area-href"><code>href</code></dfn>, <dfn id="dom-area-target" title="dom-area-target"><code>target</code></dfn>,
<!--DOWNLOAD--><!--PING-->
  <dfn id="dom-area-rel" title="dom-area-rel"><code>rel</code></dfn>, <dfn id="dom-area-media" title="dom-area-media"><code>media</code></dfn>, <dfn id="dom-area-hreflang" title="dom-area-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-area-type" title="dom-area-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>

  <p>The IDL attribute <dfn id="dom-area-shape" title="dom-area-shape"><code>shape</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
  content attribute.</p>

  <p>The IDL attribute <dfn id="dom-area-rellist" title="dom-area-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 <code><a href="#the-area-element">area</a></code> element also supports the complement of
  <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-area-protocol" title="dom-area-protocol"><code>protocol</code></dfn>, <dfn id="dom-area-host" title="dom-area-host"><code>host</code></dfn>, <dfn id="dom-area-port" title="dom-area-port"><code>port</code></dfn>, <dfn id="dom-area-hostname" title="dom-area-hostname"><code>hostname</code></dfn>, <dfn id="dom-area-pathname" title="dom-area-pathname"><code>pathname</code></dfn>, <dfn id="dom-area-search" title="dom-area-search"><code>search</code></dfn>, and <dfn id="dom-area-hash" title="dom-area-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>



  </body></html>
--- NEW FILE: the-datalist-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.10 The datalist element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-select-element.html" title="4.10.9 The select element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-optgroup-element.html" title="4.10.11 The optgroup 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-select-element.html">&#8592; 4.10.9 The select element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-optgroup-element.html">4.10.11 The optgroup element &#8594;</a>
  </div>

  <h4 id="the-datalist-element"><span class="secno">4.10.10 </span>The <dfn><code>datalist</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>
   <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>Either: <a href="content-models.html#phrasing-content-1">phrasing content</a>.</dd>
   <dd>Or: Zero or more <code><a href="the-option-element.html#the-option-element">option</a></code> elements.</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="htmldatalistelement">HTMLDataListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-datalist-options" title="dom-datalist-options">options</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-datalist-element">datalist</a></code> element represents a set of
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements that represent predefined options for
  other controls. The contents of the element represents fallback
  content for legacy user agents, intermixed with <code><a href="the-option-element.html#the-option-element">option</a></code>
  elements that represent the predefined options. In the rendering,
  the <code><a href="#the-datalist-element">datalist</a></code> element <a href="rendering.html#represents">represents</a>
  nothing<span class="impl"> and it, along with its children, should
  be hidden</span>.</p>

  <p>The <code><a href="#the-datalist-element">datalist</a></code> element is hooked up to an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element using the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute on the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element.</p>

  <p>Each <code><a href="the-option-element.html#the-option-element">option</a></code> element that is a descendant of the
  <code><a href="#the-datalist-element">datalist</a></code> element, that is not <a href="the-option-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a>, and whose <a href="the-option-element.html#concept-option-value" title="concept-option-value">value</a> is a string that isn't the
  empty string, represents a suggestion. Each suggestion has a <a href="the-option-element.html#concept-option-value" title="concept-option-value">value</a> and a <a href="the-option-element.html#concept-option-label" title="concept-option-label">label</a>.

<!--TOPIC:DOM APIs-->
  </p><dl class="domintro"><dt><var title="">datalist</var> . <code title="dom-datalist-options"><a href="#dom-datalist-options">options</a></code></dt>

   <dd>
    <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-datalist-options" title="dom-datalist-options"><code>options</code></dfn>
  IDL attribute must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at
  the <code><a href="#the-datalist-element">datalist</a></code> node, whose filter matches
  <code><a href="the-option-element.html#the-option-element">option</a></code> elements.</p>

  <p><strong>Constraint validation</strong>: If an element has a
  <code><a href="#the-datalist-element">datalist</a></code> element ancestor, it is <a href="constraints.html#barred-from-constraint-validation">barred from
  constraint validation</a>.</p>

  </div>
<!--TOPIC:HTML-->


  </body></html>
--- NEW FILE: grouping-content.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.5 Grouping content &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="headings-and-sections.html" title="4.4.11 Headings and sections" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-p-element.html" title="4.5.1 The p 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="headings-and-sections.html">&#8592; 4.4.11 Headings and sections</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-p-element.html">4.5.1 The p element &#8594;</a>
  </div>

  <h3 id="grouping-content"><span class="secno">4.5 </span>Grouping content</h3>

  </body></html>
--- NEW FILE: the-mark-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.19 The mark element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-u-element.html" title="4.6.18 The u element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-ruby-element.html" title="4.6.20 The ruby 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-u-element.html">&#8592; 4.6.18 The u element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-ruby-element.html">4.6.20 The ruby element &#8594;</a>
  </div>

  <h4 id="the-mark-element"><span class="secno">4.6.19 </span>The <dfn><code>mark</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--><!-- v2: attribute that means "highlight this on the scrollbar" --><p>The <code><a href="#the-mark-element">mark</a></code> element <a href="rendering.html#represents">represents</a> a run of
  text in one document marked or highlighted for reference purposes,
  due to its relevance in another context. When used in a quotation or
  other block of text referred to from the prose, it indicates a
  highlight that was not originally present but which has been added
  to bring the reader's attention to a part of the text that might not
  have been considered important by the original author when the block
  was originally written, but which is now under previously unexpected
  scrutiny. When used in the main prose of a document, it indicates a
  part of the document that has been highlighted due to its likely
  relevance to the user's current activity.</p>

  <div class="example">
   <p>This example shows how the <code><a href="#the-mark-element">mark</a></code> element can be used
   to bring attention to a particular part of a quotation:</p>
   <pre>&lt;p lang="en-US"&gt;Consider the following quote:&lt;/p&gt;
&lt;blockquote lang="en-GB"&gt;
 &lt;p&gt;Look around and you will find, no-one's really
 &lt;mark&gt;colour&lt;/mark&gt; blind.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
the person writing this quote is clearly not American.&lt;/p&gt;</pre>
   <p>(If the goal was to mark the element as misspelt, however, the
   <code><a href="the-u-element.html#the-u-element">u</a></code> element, possibly with a class, would be more
   appropriate.)</p>
  </div>

  <div class="example">

   <p>Another example of the <code><a href="#the-mark-element">mark</a></code> element is highlighting
   parts of a document that are matching some search string. If
   someone looked at a document, and the server knew that the user was
   searching for the word "kitten", then the server might return the
   document with one paragraph modified as follows:</p>

   <pre>&lt;p&gt;I also have some &lt;mark&gt;kitten&lt;/mark&gt;s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a &lt;mark&gt;kitten&lt;/mark&gt;.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>In the following snippet, a paragraph of text refers to a
   specific part of a code fragment.</p>

   <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;var i: Integer;
begin
   i := &lt;mark&gt;1.1&lt;/mark&gt;;
end.&lt;/code&gt;&lt;/pre&gt;</pre>

   <p>This is separate from <em>syntax highlighting</em>, for which
   <code><a href="the-span-element.html#the-span-element">span</a></code> is more appropriate. Combining both, one would
   get:</p>

   <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;span class=keyword&gt;var&lt;/span&gt; &lt;span class=ident&gt;i&lt;/span&gt;: &lt;span class=type&gt;Integer&lt;/span&gt;;
&lt;span class=keyword&gt;begin&lt;/span&gt;
   &lt;span class=ident&gt;i&lt;/span&gt; := &lt;span class=literal&gt;&lt;mark&gt;1.1&lt;/mark&gt;&lt;/span&gt;;
&lt;span class=keyword&gt;end&lt;/span&gt;.&lt;/code&gt;&lt;/pre&gt;</pre>

  </div>

  <div class="example">

   <p>This is another example showing the use of <code><a href="#the-mark-element">mark</a></code> to
   highlight a part of quoted text that was originally not
   emphasized. In this example, common typographic conventions have
   led the author to explicitly style <code><a href="#the-mark-element">mark</a></code> elements in
   quotes to render in italics.</p>

   <pre>&lt;article&gt;
 &lt;style scoped&gt;
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
 &lt;/style&gt;
 &lt;h1&gt;She knew&lt;/h1&gt;
 &lt;p&gt;Did you notice the subtle joke in the joke on panel 4?&lt;/p&gt;
 &lt;blockquote&gt;
  &lt;p class="bubble"&gt;I didn't &lt;em&gt;want&lt;/em&gt; to believe. &lt;mark&gt;Of course
  on some level I realized it was a known-plaintext attack.&lt;/mark&gt; But I
  couldn't admit it until I saw for myself.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.&lt;/p&gt;
&lt;/article&gt;</pre>

   <p>Note, incidentally, the distinction between the <code><a href="the-em-element.html#the-em-element">em</a></code>
   element in this example, which is part of the original text being
   quoted, and the <code><a href="#the-mark-element">mark</a></code> element, which is highlighting a
   part for comment.</p>

  </div>

  <div class="example">

   <p>The following example shows the difference between denoting the
   <em>importance</em> of a span of text (<code><a href="the-strong-element.html#the-strong-element">strong</a></code>) as
   opposed to denoting the <em>relevance</em> of a span of text
   (<code><a href="#the-mark-element">mark</a></code>). It is an extract from a textbook, where the
   extract has had the parts relevant to the exam highlighted. The
   safety warnings, important though they may be, are apparently not
   relevant to the exam.</p>

   <pre>&lt;h3&gt;Wormhole Physics Introduction&lt;/h3&gt;

&lt;p&gt;&lt;mark&gt;A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.&lt;/mark&gt; Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.&lt;/mark&gt;&lt;/p&gt;

&lt;p&gt;When a wormhole is created, a vortex normally forms.
&lt;strong&gt;Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.&lt;/strong&gt; Vortexes can be avoided when
using sufficiently advanced dialing technology.&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;An obstruction in a gate will prevent it from accepting a
wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>

  </div>


  </body></html>
--- NEW FILE: the-dfn-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.8 The dfn element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-q-element.html" title="4.6.7 The q element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-abbr-element.html" title="4.6.9 The abbr 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-q-element.html">&#8592; 4.6.7 The q element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-abbr-element.html">4.6.9 The abbr element &#8594;</a>
  </div>

  <h4 id="the-dfn-element"><span class="secno">4.6.8 </span>The <dfn><code>dfn</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>, but there must be no <code><a href="#the-dfn-element">dfn</a></code> element 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>
   <dd>Also, the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> 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-dfn-element">dfn</a></code> element <a href="rendering.html#represents">represents</a> the defining
  instance of a term. The <a href="content-models.html#paragraph" title="paragraph">paragraph</a>,
  <a href="the-dl-element.html#the-dl-element" title="dl">description list group</a>, or <a href="content-models.html#sectioning-content-0" title="sectioning content">section</a> that is the nearest
  ancestor of the <code><a href="#the-dfn-element">dfn</a></code> element must also contain the
  definition(s) for the <a href="#defining-term" title="defining term">term</a> given
  by the <code><a href="#the-dfn-element">dfn</a></code> element.</p>

  <p><dfn id="defining-term">Defining term</dfn>: If the <code><a href="#the-dfn-element">dfn</a></code> element has a
  <dfn id="attr-dfn-title" title="attr-dfn-title"><code>title</code></dfn> attribute, then
  the exact value of that attribute is the term being defined.
  Otherwise, if it contains exactly one element child node and no
  child <code><a href="infrastructure.html#text-0">Text</a></code> nodes, and that child
  element is an <code><a href="the-abbr-element.html#the-abbr-element">abbr</a></code> element with a <code title="attr-abbr-title"><a href="the-abbr-element.html#attr-abbr-title">title</a></code> attribute, then the exact value
  of <em>that</em> attribute is the term being defined. Otherwise, it
  is the exact <code><a href="infrastructure.html#textcontent">textContent</a></code> of the <code><a href="#the-dfn-element">dfn</a></code>
  element that gives the term being defined.</p>

  <!-- note that this means <dfn>x \n x</dfn> won't match <span>x x</span> -->

  <p>If the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> attribute of the
  <code><a href="#the-dfn-element">dfn</a></code> element is present, then it must contain only the
  term being defined.</p>

  <p class="note">The <code title="attr-title"><a href="global-attributes.html#the-title-attribute">title</a></code> attribute
  of ancestor elements does not affect <code><a href="#the-dfn-element">dfn</a></code> elements.</p>

  <p>An <code><a href="the-a-element.html#the-a-element">a</a></code> element that links to a <code><a href="#the-dfn-element">dfn</a></code>
  element represents an instance of the term defined by the
  <code><a href="#the-dfn-element">dfn</a></code> element.</p>

  <div class="example">

   <p>In the following fragment, the term "Garage Door Opener" is
   first defined in the first paragraph, then used in the second. In
   both cases, its abbreviation is what is actually displayed.</p>

   <pre>&lt;p&gt;The <strong>&lt;dfn&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;</strong>
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his <strong>&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;</strong>
and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>

   <p>With the addition of an <code><a href="the-a-element.html#the-a-element">a</a></code> element, the reference
   can be made explicit:</p>

   <pre>&lt;p&gt;The &lt;dfn <strong>id=gdo</strong>&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his <strong>&lt;a href=#gdo&gt;</strong>&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;<strong><a href="the-a-element.html#the-a-element">&lt;/a&gt;</a></strong>
and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: acknowledgements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>Acknowledgements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1090 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-header-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.8 The header element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-hgroup-element.html" title="4.4.7 The hgroup element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-footer-element.html" title="4.4.9 The footer 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-hgroup-element.html">&#8592; 4.4.7 The hgroup element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-footer-element.html">4.4.9 The footer element &#8594;</a>
  </div>

  <h4 id="the-header-element"><span class="secno">4.4.8 </span>The <dfn><code>header</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#flow-content-1">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code> or
   <code><a href="the-footer-element.html#the-footer-element">footer</a></code> element 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-header-element">header</a></code> element <a href="rendering.html#represents">represents</a> a group
  of introductory or navigational aids.</p>

  <p class="note">A <code><a href="#the-header-element">header</a></code> element is intended to usually
  contain the section's heading (an
  <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>&#8211;<code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> element or an
  <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> element), but this is not required. The
  <code><a href="#the-header-element">header</a></code> element can also be used to wrap a section's
  table of contents, a search form, or any relevant logos.</p>

  <div class="example">

  <p>Here are some sample headers. This first one is for a game:</p>

   <pre>&lt;header&gt;
 &lt;p&gt;Welcome to...&lt;/p&gt;
 &lt;h1&gt;Voidwars!&lt;/h1&gt;
&lt;/header&gt;</pre>

   <p>The following snippet shows how the element can be used to mark
   up a specification's header:</p>

   <pre>&lt;header&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
  &lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;dl&gt;
  &lt;dt&gt;This version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Previous version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Editor:&lt;/dt&gt;
  &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean@w3.org"&gt;dean@w3.org&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Authors:&lt;/dt&gt;
  &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
&lt;/header&gt;</pre>

  </div>

  <p class="note">The <code><a href="#the-header-element">header</a></code> element is not
  <a href="content-models.html#sectioning-content-0">sectioning content</a>; it doesn't introduce a new
  section.</p>

  <div class="example">

  <p>In this example, the page has a page heading given by the
  <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> element, and two subsections whose headings are
  given by <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code> elements. The content after the
  <code><a href="#the-header-element">header</a></code> element is still part of the last subsection
  started in the <code><a href="#the-header-element">header</a></code> element, because the
  <code><a href="#the-header-element">header</a></code> element doesn't take part in the
  <a href="headings-and-sections.html#outline">outline</a> algorithm.</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;Little Green Guys With Guns&lt;/h1&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="/games"&gt;Games&lt;/a&gt;
    &lt;li&gt;&lt;a href="/forum"&gt;Forum&lt;/a&gt;
    &lt;li&gt;&lt;a href="/download"&gt;Download&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2&gt;Important News&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
  &lt;!-- this is part of the subsection entitled "Important News" --&gt;
  &lt;p&gt;To play today's games you will need to update your client.&lt;/p&gt;
  &lt;h2&gt;Games&lt;/h2&gt; &lt;!-- this starts a third subsection --&gt;
 &lt;/header&gt;
 &lt;p&gt;You have three active games:&lt;/p&gt;
 &lt;!-- this is still part of the subsection entitled "Games" --&gt;
 ...</pre>

  </div>




  </body></html>
--- NEW FILE: elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>3.2 Elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="global-attributes.html" title="3.2.3 Global attributes" 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="dom.html">&#8592; 3 Semantics, structure, and APIs of HTML documents</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="global-attributes.html">3.2.3 Global attributes &#8594;</a>
  <ol class="toc"><li><ol><li><a href="elements.html#elements"><span class="secno">3.2 </span>Elements</a>
    <ol><li><a href="elements.html#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li><li><a href="elements.html#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li></ol></li></ol></li></ol></div>

  <h3 id="elements"><span class="secno">3.2 </span>Elements</h3>

  <h4 id="semantics-0"><span class="secno">3.2.1 </span>Semantics</h4>

  <p>Elements, attributes, and attribute values in HTML are defined
  (by this specification) to have certain meanings (semantics). For
  example, the <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element represents an ordered list, and
  the <code title="attr-lang"><a href="global-attributes.html#attr-lang">lang</a></code> attribute represents the
  language of the content.</p>

  <p>These definitions allow HTML processors, such as Web browsers or
  search engines, to present and use documents and applications in a
  wide variety of contexts that the author might not have
  considered.</p>

  <div class="example">

   <p>As a simple example, consider a Web page written by an author
   who only considered desktop computer Web browsers. Because HTML
   conveys <em>meaning</em>, rather than presentation, the same page
   can also be used by a small browser on a mobile phone, without any
   change to the page. Instead of headings being in large letters as
   on the desktop, for example, the browser on the mobile phone might
   use the same size text for the whole the page, but with the
   headings in bold.</p>

   <p>But it goes further than just differences in screen size: the
   same page could equally be used by a blind user using a browser
   based around speech synthesis, which instead of displaying the page
   on a screen, reads the page to the user, e.g. using headphones.
   Instead of large text for the headings, the speech browser might
   use a different volume or a slower voice.</p>

   <p>That's not all, either. Since the browsers know which parts of
   the page are the headings, they can create a document outline that
   the user can use to quickly navigate around the document, using
   keys for "jump to next heading" or "jump to previous heading". Such
   features are especially common with speech browsers, where users
   would otherwise find quickly navigating a page quite difficult.</p>

   <p>Even beyond browsers, software can make use of this information.
   Search engines can use the headings to more effectively index a
   page, or to provide quick links to subsections of the page from
   their results. Tools can use the headings to create a table of
   contents (that is in fact how this very specification's table of
   contents is generated).</p>

   <p>This example has focused on headings, but the same principle
   applies to all of the semantics in HTML.</p>

  </div>

  <p>Authors must not use elements, attributes, or attribute values
  for purposes other than their appropriate intended semantic purpose,
  as doing so prevents software from correctly processing the
  page.</p>

  <div class="example">

   <p>For example, the following document is non-conforming, despite
   being syntactically correct:</p>

   <pre class="bad">&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;table&gt;
   &lt;tr&gt; &lt;td&gt; My favourite animal is the cat. &lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;
     &#8212;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
     in an essay from 1992
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>...because the data placed in the cells is clearly not tabular
   data (and the <code><a href="the-cite-element.html#the-cite-element">cite</a></code> element mis-used). This would make
   software that relies on these semantics fail: for example, a speech
   browser that allowed a blind user to navigate tables in the
   document would report the quote above as a table, confusing the
   user; similarly, a tool that extracted titles of works from pages
   would extract "Ernest" as the title of a work, even though it's
   actually a person's name, not a title.</p>

   <p>A corrected version of this document might be:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;blockquote&gt;
   &lt;p&gt; My favourite animal is the cat. &lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;p&gt;
   &#8212;&lt;a href="http://example.org/~ernest/"&gt;Ernest&lt;/a&gt;,
   in an essay from 1992
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>

  <div class="example">

   <p>This next document fragment, intended to represent the heading
   of a corporate site, is similarly non-conforming because the second
   line is not intended to be a heading of a subsection, but merely a
   subheading or subtitle (a subordinate heading for the same
   section).</p>

   <pre class="bad">&lt;body&gt;
 &lt;h1&gt;ABC Company&lt;/h1&gt;
 &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 ...</pre>

   <p>The <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> element is intended for these kinds of
   situations:</p>

   <pre>&lt;body&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;ABC Company&lt;/h1&gt;
  &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 &lt;/hgroup&gt;
 ...</pre>

  </div>

  <p>Authors must not use elements, attributes, or attribute values
  that are not permitted by this specification or <a href="infrastructure.html#other-applicable-specifications">other
  applicable specifications</a>, as doing so makes it significantly
  harder for the language to be extended in the future.</p>

  <div class="example">

   <p>In the next example, there is a non-conforming attribute value
   ("carpet") and a non-conforming attribute ("texture"), which
   is not permitted by this specification:</p>

   <pre class="bad">&lt;label&gt;Carpet: &lt;input type="carpet" name="c" texture="deep pile"&gt;&lt;/label&gt;</pre>

   <p>Here would be an alternative and correct way to mark this up:</p>

   <pre>&lt;label&gt;Carpet: &lt;input type="text" class="carpet" name="c" data-texture="deep pile"&gt;&lt;/label&gt;</pre>

  </div>

  <p>Through scripting and using other mechanisms, the values of
  attributes, text, and indeed the entire structure of the document
  may change dynamically while a user agent is processing it. The
  semantics of a document at an instant in time are those represented
  by the state of the document at that instant in time, and the
  semantics of a document can therefore change over time. User agents
  <span class="impl">must</span> update their presentation of the
  document as this occurs.</p>

  <p class="example">HTML has a <code><a href="the-progress-element.html#the-progress-element">progress</a></code> element that
  describes a progress bar. If its "value" attribute is dynamically
  updated by a script, the UA would update the rendering to show the
  progress changing.</p>



<!--TOPIC:DOM APIs-->
  <h4 id="elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</h4>

  <p>The nodes representing <a href="infrastructure.html#html-elements">HTML elements</a> in the DOM
  <span class="impl">must</span> implement, and expose to scripts, the
  interfaces listed for them in the relevant sections of this
  specification. This includes <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="infrastructure.html#xml-documents">XML
  documents</a>, even when those documents are in another context
  (e.g. inside an XSLT transform).</p>

  <p>Elements in the DOM <a href="rendering.html#represents" title="represents">represent</a>
  things; that is, they have intrinsic <em>meaning</em>, also known as
  semantics.</p>

  <p class="example">For example, an <code><a href="the-ol-element.html#the-ol-element">ol</a></code> element
  represents an ordered list.</p>

  <p>The basic interface, from which all the <a href="infrastructure.html#html-elements">HTML
  elements</a>' interfaces inherit, <span class="impl">and which
  must be used by elements that have no additional
  requirements,</span> is the <code><a href="#htmlelement">HTMLElement</a></code> interface.</p>

  <pre class="idl">interface <dfn id="htmlelement">HTMLElement</dfn> : <a href="infrastructure.html#element">Element</a> {
  // <span>metadata attributes</span>
           attribute DOMString <a href="global-attributes.html#dom-title" title="dom-title">title</a>;
           attribute DOMString <a href="global-attributes.html#dom-lang" title="dom-lang">lang</a>;
           attribute boolean <a href="global-attributes.html#dom-translate" title="dom-translate">translate</a>;
           attribute DOMString <a href="global-attributes.html#dom-dir" title="dom-dir">dir</a>;
           attribute <span>DOMString</span> <a href="global-attributes.html#dom-classname" title="dom-className">className</a>;
  readonly attribute <a href="infrastructure.html#domtokenlist">DOMTokenList</a> <a href="global-attributes.html#dom-classlist" title="dom-classList">classList</a>;
  readonly attribute <a href="common-dom-interfaces.html#domstringmap-0">DOMStringMap</a> <a href="global-attributes.html#dom-dataset" title="dom-dataset">dataset</a>;

<!--MD-->
  // <a href="editing.html#editing">user interaction</a>
           attribute boolean <a href="editing.html#dom-hidden" title="dom-hidden">hidden</a>;
  void <a href="editing.html#dom-click" title="dom-click">click</a>();
           attribute long <a href="editing.html#dom-tabindex" title="dom-tabindex">tabIndex</a>;
  void <a href="editing.html#dom-focus" title="dom-focus">focus</a>();
  void <a href="editing.html#dom-blur" title="dom-blur">blur</a>();
           attribute DOMString <a href="editing.html#dom-accesskey" title="dom-accessKey">accessKey</a>;
  readonly attribute DOMString <a href="editing.html#dom-accesskeylabel" title="dom-accessKeyLabel">accessKeyLabel</a>;
           attribute boolean <a href="dnd.html#dom-draggable" title="dom-draggable">draggable</a>;
  [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="infrastructure.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="dnd.html#dom-dropzone" title="dom-dropzone">dropzone</a>;
           attribute DOMString <a href="editing.html#dom-contenteditable" title="dom-contentEditable">contentEditable</a>;
  readonly attribute boolean <a href="editing.html#dom-iscontenteditable" title="dom-isContentEditable">isContentEditable</a>;
           attribute <a href="the-menu-element.html#htmlmenuelement">HTMLMenuElement</a>? <a href="the-menu-element.html#dom-contextmenu" title="dom-contextMenu">contextMenu</a>;
           attribute boolean <a href="editing-apis.html#dom-spellcheck" title="dom-spellcheck">spellcheck</a>;

  // <a href="commands.html#command-api">command API</a>
  readonly attribute DOMString? <a href="commands.html#dom-command-ro-commandtype" title="dom-command-ro-commandType">commandType</a>;
  readonly attribute DOMString? <a href="commands.html#dom-command-ro-commandlabel" title="dom-command-ro-commandLabel">commandLabel</a>;
  readonly attribute DOMString? <a href="commands.html#dom-command-ro-commandicon" title="dom-command-ro-commandIcon">commandIcon</a>;
  readonly attribute boolean? <a href="commands.html#dom-command-ro-commandhidden" title="dom-command-ro-commandHidden">commandHidden</a>;
  readonly attribute boolean? <a href="commands.html#dom-command-ro-commanddisabled" title="dom-command-ro-commandDisabled">commandDisabled</a>;
  readonly attribute boolean? <a href="commands.html#dom-command-ro-commandchecked" title="dom-command-ro-commandChecked">commandChecked</a>;<!-- v2COMMAND
  readonly attribute <span>HTMLCollection</span> <span title="dom-command-ro-commandTriggers">commandTriggers</span>;-->

  // <span>styling</span>
  readonly attribute <a href="infrastructure.html#cssstyledeclaration">CSSStyleDeclaration</a> <a href="global-attributes.html#dom-style" title="dom-style">style</a>;

  // <a href="webappapis.html#event-handler-idl-attributes">event handler IDL attributes</a>
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onabort" title="handler-onabort">onabort</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onblur" title="handler-onblur">onblur</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oncancel" title="handler-oncancel">oncancel</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oncanplay" title="handler-oncanplay">oncanplay</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onchange" title="handler-onchange">onchange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onclick" title="handler-onclick">onclick</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onclose" title="handler-onclose">onclose</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oncuechange" title="handler-oncuechange">oncuechange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondblclick" title="handler-ondblclick">ondblclick</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondrag" title="handler-ondrag">ondrag</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondragend" title="handler-ondragend">ondragend</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondragenter" title="handler-ondragenter">ondragenter</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondragleave" title="handler-ondragleave">ondragleave</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondragover" title="handler-ondragover">ondragover</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondragstart" title="handler-ondragstart">ondragstart</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondrop" title="handler-ondrop">ondrop</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onemptied" title="handler-onemptied">onemptied</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onended" title="handler-onended">onended</a>;
           attribute <a href="webappapis.html#onerroreventhandler">OnErrorEventHandler</a> <a href="webappapis.html#handler-onerror" title="handler-onerror">onerror</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onfocus" title="handler-onfocus">onfocus</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oninput" title="handler-oninput">oninput</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-oninvalid" title="handler-oninvalid">oninvalid</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onkeydown" title="handler-onkeydown">onkeydown</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onkeypress" title="handler-onkeypress">onkeypress</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onkeyup" title="handler-onkeyup">onkeyup</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onload" title="handler-onload">onload</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onloadstart" title="handler-onloadstart">onloadstart</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmousedown" title="handler-onmousedown">onmousedown</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmousemove" title="handler-onmousemove">onmousemove</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmouseout" title="handler-onmouseout">onmouseout</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmouseover" title="handler-onmouseover">onmouseover</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmouseup" title="handler-onmouseup">onmouseup</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onpause" title="handler-onpause">onpause</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onplay" title="handler-onplay">onplay</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onplaying" title="handler-onplaying">onplaying</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onprogress" title="handler-onprogress">onprogress</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onratechange" title="handler-onratechange">onratechange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onreset" title="handler-onreset">onreset</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onscroll" title="handler-onscroll">onscroll</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onseeked" title="handler-onseeked">onseeked</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onseeking" title="handler-onseeking">onseeking</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onselect" title="handler-onselect">onselect</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onshow" title="handler-onshow">onshow</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onstalled" title="handler-onstalled">onstalled</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onsubmit" title="handler-onsubmit">onsubmit</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onsuspend" title="handler-onsuspend">onsuspend</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>;
           attribute <a href="webappapis.html#eventhandler">EventHandler</a> <a href="webappapis.html#handler-onwaiting" title="handler-onwaiting">onwaiting</a>;
};

interface <dfn id="htmlunknownelement">HTMLUnknownElement</dfn> : <a href="#htmlelement">HTMLElement</a> { };</pre>

  <p>The <code><a href="#htmlelement">HTMLElement</a></code> interface holds methods and
  attributes related to a number of disparate features, and the
  members of this interface are therefore described in various
  different sections of this specification.</p>

  <div class="impl">

  <p>The <code><a href="#htmlunknownelement">HTMLUnknownElement</a></code> interface must be used for
  <a href="infrastructure.html#html-elements">HTML elements</a> that are not defined by this
  specification (or <a href="infrastructure.html#other-applicable-specifications">other applicable specifications</a>).</p>

  </div>


<!--TOPIC:HTML-->
  </body></html>
--- NEW FILE: the-sub-and-sup-elements.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.15 The sub and sup elements &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-kbd-element.html" title="4.6.14 The kbd element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-i-element.html" title="4.6.16 The i 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-kbd-element.html">&#8592; 4.6.14 The kbd element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-i-element.html">4.6.16 The i element &#8594;</a>
  </div>

  <h4 id="the-sub-and-sup-elements"><span class="secno">4.6.15 </span>The <dfn id="the-sub-element"><code>sub</code></dfn> and <dfn id="the-sup-element"><code>sup</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#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>Use <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-sub-and-sup-elements">sup</a></code> element <a href="rendering.html#represents">represents</a> a
  superscript and the <code><a href="#the-sub-and-sup-elements">sub</a></code> element <a href="rendering.html#represents">represents</a>
  a subscript.</p>

  <p>These elements must be used only to mark up typographical
  conventions with specific meanings, not for typographical
  presentation for presentation's sake. For example, it would be
  inappropriate for the <code><a href="#the-sub-and-sup-elements">sub</a></code> and <code><a href="#the-sub-and-sup-elements">sup</a></code> elements
  to be used in the name of the LaTeX document preparation system. In
  general, authors should use these elements only if the
  <em>absence</em> of those elements would change the meaning of the
  content.</p>

  <p>In certain languages, superscripts are part of the typographical
  conventions for some abbreviations.</p>

  <div class="example">
   <pre>&lt;p&gt;The most beautiful women are
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline&lt;/span&gt; and
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;me&lt;/sup&gt;&lt;/abbr&gt; Denise&lt;/span&gt;.&lt;/p&gt;</pre>
  </div>

  <p>The <code><a href="#the-sub-and-sup-elements">sub</a></code> element can be used inside a
  <code><a href="the-var-element.html#the-var-element">var</a></code> element, for variables that have subscripts.</p>

  <div class="example">

   <p>Here, the <code><a href="#the-sub-and-sup-elements">sub</a></code> element is used to represents the
   subscript that identifies the variable in a family of
   variables:</p>

   <pre>&lt;p&gt;The coordinate of the &lt;var&gt;i&lt;/var&gt;th point is
(&lt;var&gt;x&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;).
For example, the 10th point has coordinate
(&lt;var&gt;x&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;).&lt;/p&gt;</pre>
  </div>

  <p>Mathematical expressions often use subscripts and superscripts.
  Authors are encouraged to use MathML for marking up mathematics, but
  authors may opt to use <code><a href="#the-sub-and-sup-elements">sub</a></code> and <code><a href="#the-sub-and-sup-elements">sup</a></code> if
  detailed mathematical markup is not desired. <a href="references.html#refsMATHML">[MATHML]</a></p>

  <div class="example">
   <pre>&lt;var&gt;E&lt;/var&gt;=&lt;var&gt;m&lt;/var&gt;&lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;</pre>
   <pre>f(&lt;var&gt;x&lt;/var&gt;, &lt;var&gt;n&lt;/var&gt;) = log&lt;sub&gt;4&lt;/sub&gt;&lt;var&gt;x&lt;/var&gt;&lt;sup&gt;&lt;var&gt;n&lt;/var&gt;&lt;/sup&gt;</pre>
  </div>



  </body></html>
--- NEW FILE: the-i-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.16 The i element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-sub-and-sup-elements.html" title="4.6.15 The sub and sup elements" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-b-element.html" title="4.6.17 The b 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-sub-and-sup-elements.html">&#8592; 4.6.15 The sub and sup elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-b-element.html">4.6.17 The b element &#8594;</a>
  </div>

  <h4 id="the-i-element"><span class="secno">4.6.16 </span>The <dfn><code>i</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-i-element">i</a></code> element <a href="rendering.html#represents">represents</a> a span of text
  in an alternate voice or mood, or otherwise offset from the normal
  prose in a manner indicating a different quality of text, such as a
  taxonomic designation, a technical term, an idiomatic phrase from
  another language, a thought, or a ship name in Western texts.</p>

  <p>Terms in languages different from the main text should be
  annotated with <code title="attr-lang"><a href="global-attributes.html#attr-lang">lang</a></code> attributes (or,
  in XML, <a href="global-attributes.html#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code>
  attributes in the <span>XML namespace</span></a>).</p>

  <div class="example">
   <p>The examples below show uses of the <code><a href="#the-i-element">i</a></code> element:</p>
   <pre>&lt;p&gt;The &lt;i class="taxonomy"&gt;Felis silvestris catus&lt;/i&gt; is cute.&lt;/p&gt;
&lt;p&gt;The term &lt;i&gt;prose content&lt;/i&gt; is defined above.&lt;/p&gt;
&lt;p&gt;There is a certain &lt;i lang="fr"&gt;je ne sais quoi&lt;/i&gt; in the air.&lt;/p&gt;</pre>
   <p>In the following example, a dream sequence is marked up using
   <code><a href="#the-i-element">i</a></code> elements.</p>
   <pre>&lt;p&gt;Raymond tried to sleep.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;The ship sailed away on Thursday&lt;/i&gt;, he
dreamt. &lt;i&gt;The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Finally one night he picked up the courage to speak with
her&#8212;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;Raymond woke with a start as the fire alarm rang out.&lt;/p&gt;</pre>
  </div>

  <p>Authors can use the <code title="attr-class"><a href="global-attributes.html#classes">class</a></code>
  attribute on the <code><a href="#the-i-element">i</a></code> element to identify why the element
  is being used, so that if the style of a particular use (e.g. dream
  sequences as opposed to taxonomic terms) is to be changed at a later
  date, the author doesn't have to go through the entire document (or
  series of related documents) annotating each use.</p>

  <p>Authors are encouraged to consider whether other elements might
  be more applicable than the <code><a href="#the-i-element">i</a></code> element, for instance the
  <code><a href="the-em-element.html#the-em-element">em</a></code> element for marking up stress emphasis, or the
  <code><a href="the-dfn-element.html#the-dfn-element">dfn</a></code> element to mark up the defining instance of a
  term.</p>

  <p class="note">Style sheets can be used to format <code><a href="#the-i-element">i</a></code>
  elements, just like any other element can be restyled. Thus, it is
  not the case that content in <code><a href="#the-i-element">i</a></code> elements will
  necessarily be italicized.</p>


  </body></html>
--- NEW FILE: forms.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10 Forms &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="examples.html" title="4.9.13 Examples" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-form-element.html" title="4.10.3 The form 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="examples.html">&#8592; 4.9.13 Examples</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-form-element.html">4.10.3 The form element &#8594;</a>
  <ol class="toc"><li><ol><li><a href="forms.html#forms"><span class="secno">4.10 </span>Forms</a>
    <ol><li><a href="forms.html#introduction-1"><span class="secno">4.10.1 </span>Introduction</a>
      <ol><li><a href="forms.html#writing-a-form's-user-interface"><span class="secno">4.10.1.1 </span>Writing a form's user interface</a></li><li><a href="forms.html#implementing-the-server-side-processing-for-a-form"><span class="secno">4.10.1.2 </span>Implementing the server-side processing for a form</a></li><li><a href="forms.html#configuring-a-form-to-communicate-with-a-server"><span class="secno">4.10.1.3 </span>Configuring a form to communicate with a server</a></li><li><a href="forms.html#client-side-form-validation"><span class="secno">4.10.1.4 </span>Client-side form validation</a></li><li><a href="forms.html#input-author-notes"><span class="secno">4.10.1.5 </span>Date, time, and number formats</a></li></ol></li><li><a href="forms.html#categories"><span class="secno">4.10.2 </span>Categories</a></li></ol></li></ol></li></ol></div>

  <h3 id="forms"><span class="secno">4.10 </span>Forms</h3>

  <h4 id="introduction-1"><span class="secno">4.10.1 </span>Introduction</h4>

  <p><i>This section is non-normative.</i></p>
  <p>A form is a component of a Web page that has form controls, such
  as text fields, buttons, checkboxes, range controls, or color
  pickers. A user can interact with such a form, providing data that
  can then be sent to the server for further processing (e.g.
  returning the results of a search or calculation). No client-side
  scripting is needed in many cases, though an API is available so
  that scripts can augment the user experience or use forms for
  purposes other than submitting data to a server.</p>

  <p>Writing a form consists of several steps, which can be performed
  in any order: writing the user interface, implementing the
  server-side processing, and configuring the user interface to
  communicate with the server.</p>


  <h5 id="writing-a-form's-user-interface"><span class="secno">4.10.1.1 </span>Writing a form's user interface</h5>

  <p><i>This section is non-normative.</i></p>
  <p>For the purposes of this brief introduction, we will create a
  pizza ordering form.</p>

  <p>Any form starts with a <code><a href="the-form-element.html#the-form-element">form</a></code> element, inside which
  are placed the controls. Most controls are represented by the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element, which by default provides a one-line
  text field. To label a control, the <code><a href="the-label-element.html#the-label-element">label</a></code> element is
  used; the label text and the control itself go inside the
  <code><a href="the-label-element.html#the-label-element">label</a></code> element. Each part of a form is considered a
  <a href="content-models.html#paragraph">paragraph</a>, and is typically separated from other parts
  using <code><a href="the-p-element.html#the-p-element">p</a></code> elements. Putting this together, here is how
  one might ask for the customer's name:</p>

  <pre><strong>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/form&gt;</strong></pre>

  <p>To let the user select the size of the pizza, we can use a set of
  radio buttons. Radio buttons also use the <code><a href="the-input-element.html#the-input-element">input</a></code>
  element, this time with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
  attribute with the value <code title="attr-input-type-radio"><a href="states-of-the-type-attribute.html#radio-button-state-(type=radio)">radio</a></code>. To make the radio
  buttons work as a group, they are given a common name using the
  <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code> attribute. To group a batch
  of controls together, such as, in this case, the radio buttons, one
  can use the <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code> element. The title of such a group
  of controls is given by the first element in the
  <code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code>, which has to be a <code><a href="the-legend-element.html#the-legend-element">legend</a></code>
  element.</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;</strong>
&lt;/form&gt;</pre>

  <p class="note">Changes from the previous step are highlighted.</p>

  <p>To pick toppings, we can use checkboxes. These use the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute with the value <code title="attr-input-type-checkbox"><a href="states-of-the-type-attribute.html#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
<strong> &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;</strong>
&lt;/form&gt;</pre>

  <p>The pizzeria for which this form is being written is always
  making mistakes, so it needs a way to contact the customer. For this
  purpose, we can use form controls specifically for telephone numbers
  (<code><a href="the-input-element.html#the-input-element">input</a></code> elements with their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-tel"><a href="states-of-the-type-attribute.html#telephone-state-(type=tel)">tel</a></code>) and e-mail addresses
  (<code><a href="the-input-element.html#the-input-element">input</a></code> elements with their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-email"><a href="states-of-the-type-attribute.html#e-mail-state-(type=email)">email</a></code>):</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;</strong>
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
&lt;/form&gt;</pre>

  <p>We can use an <code><a href="the-input-element.html#the-input-element">input</a></code> element with its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to <code title="attr-input-type-time"><a href="states-of-the-type-attribute.html#time-state-(type=time)">time</a></code> to ask for a delivery
  time. Many of these form controls have attributes to control exactly
  what values can be specified; in this case, three attributes of
  particular interest are <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
  <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>, and <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>. These set the minimum time, the
  maximum time, and the interval between allowed values (in
  seconds). This pizzeria only delivers between 11am and 9pm, and
  doesn't promise anything better than 15 minute increments, which we
  can mark up as follows:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
<strong> &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>

  <p>The <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element can be used to provide a
  free-form text field. In this instance, we are going to use it to
  provide a space for the customer to give delivery instructions:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>

  <p>Finally, to make the form submittable we use the
  <code><a href="the-button-element.html#the-button-element">button</a></code> element:</p>

  <pre>&lt;form&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>


  <h5 id="implementing-the-server-side-processing-for-a-form"><span class="secno">4.10.1.2 </span>Implementing the server-side processing for a form</h5>

  <p><i>This section is non-normative.</i></p>
  <p>The exact details for writing a server-side processor are out of
  scope for this specification. For the purposes of this introduction,
  we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
  accept submissions using the <code title="attr-fs-enctype-urlencoded"><a href="form-submission.html#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
  format, expecting the following parameters sent in an HTTP POST
  body:</p>

  <dl><dt><code title="">custname</code></dt>
   <dd>Customer's name</dd>

   <dt><code title="">custtel</code></dt>
   <dd>Customer's telephone number</dd>

   <dt><code title="">custemail</code></dt>
   <dd>Customer's e-mail address</dd>

   <dt><code title="">size</code></dt>
   <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>

   <dt><code title="">toppings</code></dt>
   <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>

   <dt><code title="">delivery</code></dt>
   <dd>The requested delivery time</dd>

   <dt><code title="">comments</code></dt>
   <dd>The delivery instructions</dd>

  </dl><h5 id="configuring-a-form-to-communicate-with-a-server"><span class="secno">4.10.1.3 </span>Configuring a form to communicate with a server</h5>

  <p><i>This section is non-normative.</i></p>
  <p>Form submissions are exposed to servers in a variety of ways,
  most commonly as HTTP GET or POST requests. To specify the exact
  method used, the <code title="attr-fs-method"><a href="form-submission.html#attr-fs-method">method</a></code>
  attribute is specified on the <code><a href="the-form-element.html#the-form-element">form</a></code> element. This
  doesn't specify how the form data is encoded, though; to specify
  that, you use the <code title="attr-fs-enctype"><a href="form-submission.html#attr-fs-enctype">enctype</a></code>
  attribute. You also have to specify the <a href="urls.html#url">URL</a> of the
  service that will handle the submitted data, using the <code title="attr-fs-action"><a href="form-submission.html#attr-fs-action">action</a></code> attribute.</p>

  <p>For each form control you want submitted, you then have to give a
  name that will be used to refer to the data in the submission. We
  already specified the name for the group of radio buttons; the same
  attribute (<code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code>) also specifies
  the submission name. Radio buttons can be distinguished from each
  other in the submission by giving them different values, using the
  <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute.</p>

  <p>Multiple controls can have the same name; for example, here we
  give all the checkboxes the same name, and the server distinguishes
  which checkbox was checked by seeing which values are submitted with
  that name &#8212; like the radio buttons, they are also given unique
  values with the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
  attribute.</p>

  <p>Given the settings in the previous section, this all becomes:</p>

  <pre>&lt;form<strong> method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"</strong>&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input<strong> name="custname"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel<strong> name="custtel"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email<strong> name="custemail"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="small"</strong>&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="medium"</strong>&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="large"</strong>&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="bacon"</strong>&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="cheese"</strong>&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="onion"</strong>&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="mushroom"</strong>&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea<strong> name="comments"</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

  <p>For example, if the customer entered "Denise Lawrence" as their
  name, "555-321-8642" as their telephone number, did not specify an
  e-mail address, asked for a medium-sized pizza, selected the Extra
  Cheese and Mushroom toppings, entered a delivery time of 7pm, and
  left the delivery instructions text field blank, the user agent
  would submit the following to the online Web service:</p>

  <pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</pre>



  <h5 id="client-side-form-validation"><span class="secno">4.10.1.4 </span>Client-side form validation</h5>

  <p><i>This section is non-normative.</i></p>
  <p>Forms can be annotated in such a way that the user agent will
  check the user's input before the form is submitted. The server
  still has to verify the input is valid (since hostile users can
  easily bypass the form validation), but it allows the user to avoid
  the wait incurred by having the server be the sole checker of the
  user's input.</p>

  <p>The simplest annotation is the <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> attribute, which can be
  specified on <code><a href="the-input-element.html#the-input-element">input</a></code> elements to indicate that the form
  is not to be submitted until a value is given. By adding this
  attribute to the customer name and delivery time fields, we allow
  the user agent to notify the user when the user submits the form
  without filling in those fields:</p>

  <pre>&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

  <p>It is also possible to limit the length of the input, using the
  <code title="attr-fe-maxlength"><a href="attributes-common-to-form-controls.html#attr-fe-maxlength">maxlength</a></code> attribute. By
  adding this to the <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> element, we can limit users
  to 1000 characters, preventing them from writing huge essays to the
  busy delivery drivers instead of staying focused and to the
  point:</p>

  <pre>&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
 &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"<strong> maxlength=1000</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>


  <h5 id="input-author-notes"><span class="secno">4.10.1.5 </span>Date, time, and number formats</h5>

  <p><i>This section is non-normative.</i></p>
  <p>In this pizza delivery example, the times are specified in the
  format "HH:MM": two digits for the hour, in 24-hour format, and two
  digits for the time. (Seconds could also be specified, though they
  are not necessary in this example.)</p>

  <p>In some locales, however, times are often expressed differently
  when presented to users. For example, in the United States, it is
  still common to use the 12-hour clock with an am/pm indicator, as in
  "2pm". In France, it is common to separate the hours from the
  minutes using an "h" character, as in "14h00".</p>

  <p>Similar issues exist with dates, with the added complication that
  even the order of the components is not always consistent &#8212;
  for example, in Cyprus the first of February 2003 would typically be
  written "1/2/03", while that same date in Japan would typically be
  written as "2003&#24180;02&#26376;01&#26085;" &#8212; and even with
  numbers, where locales differ, for example, in what punctuation is
  used as the decimal separator and the thousands separator.</p>

  <p>It therefore is important to distinguish the time, date, and
  number formats used in HTML and in form submissions, which are
  always the formats defined in this specification (and based on the
  well-established ISO 8601 standard for computer-readable date and
  time formats), from the time, date, and number formats presented to
  the user by the browser and accepted as input from the user by the
  browser.</p>

  <p>The format used "on the wire", i.e. in HTML markup and in form
  submissions, is intended to be computer-readable and consistent
  irrespective of the user's locale. Dates, for instance, are always
  written in the format "YYYY-MM-DD", as in "2003-02-01". Users are
  not expected to ever see this format.</p>

  <p>The time, date, or number given by the page in the wire format is
  then translated to the user's preferred presentation (based on user
  preferences or on the locale of the page itself), before being
  displayed to the user. Similarly, after the user inputs a time,
  date, or number using their preferred format, the user agent
  converts it back to the wire format before putting it in the DOM or
  submitting it.</p>

  <p>This allows scripts in pages and on servers to process times,
  dates, and numbers in a consistent manner without needing to support
  dozens of different formats, while still supporting the users'
  needs.</p>

  <div class="impl">
  <p class="note">See also the <a href="states-of-the-type-attribute.html#input-impl-notes">implementation notes</a> regarding
  localization of form controls.</p>
  </div>


  <h4 id="categories"><span class="secno">4.10.2 </span>Categories</h4>

  <p>Mostly for historical reasons, elements in this section fall into
  several overlapping (but subtly different) categories in addition to
  the usual ones like <a href="content-models.html#flow-content-1">flow content</a>, <a href="content-models.html#phrasing-content-1">phrasing
  content</a>, and <a href="content-models.html#interactive-content-0">interactive content</a>.</p>

  <p>A number of the elements are <dfn id="form-associated-element" title="form-associated
  element">form-associated elements</dfn>, which means they can have a
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a> and, to expose this, have a <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> content attribute with a matching
  <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
   <li><code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code></li>
   <li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
   <li><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code></li>
   <li><code><a href="the-label-element.html#the-label-element">label</a></code></li>
   <li><code><a href="the-object-element.html#the-object-element">object</a></code></li>
   <li><code><a href="the-output-element.html#the-output-element">output</a></code></li>
   <li><code><a href="the-select-element.html#the-select-element">select</a></code></li>
   <li><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code></li>
  </ul><p>The <a href="#form-associated-element" title="form-associated element">form-associated
  elements</a> fall into several subcategories:</p>

  <dl><dt><dfn id="category-listed" title="category-listed">Listed elements</dfn></dt>

   <dd>

    <p>Denotes elements that are listed in the <code title="dom-form-elements"><a href="the-form-element.html#dom-form-elements"><var title="">form</var>.elements</a></code>
    and <code title="dom-fieldset-elements"><a href="the-fieldset-element.html#dom-fieldset-elements"><var title="">fieldset</var>.elements</a></code> APIs.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
     <li><code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code></li>
     <li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
     <li><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code></li>
     <li><code><a href="the-object-element.html#the-object-element">object</a></code></li>
     <li><code><a href="the-output-element.html#the-output-element">output</a></code></li>
     <li><code><a href="the-select-element.html#the-select-element">select</a></code></li>
     <li><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code></li>
    </ul></dd>

   <dt><dfn id="category-submit" title="category-submit">Submittable elements</dfn></dt>

   <dd>

    <p>Denotes elements that can be used for <a href="constraints.html#constructing-form-data-set">constructing the form data
    set</a> when a <code><a href="the-form-element.html#the-form-element">form</a></code> element is <a href="constraints.html#concept-form-submit" title="concept-form-submit">submitted</a>.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
     <li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
     <li><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code></li>
     <li><code><a href="the-object-element.html#the-object-element">object</a></code></li>
     <li><code><a href="the-select-element.html#the-select-element">select</a></code></li>
     <li><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code></li>
    </ul><p>Some <a href="#category-submit" title="category-submit">submittable elements</a>
    can be, depending on their attributes, <dfn id="concept-button" title="concept-button">buttons</dfn>. The prose below defines when
    an element is a button. Some buttons are specifically <dfn id="concept-submit-button" title="concept-submit-button">submit buttons</dfn>.</p>

   </dd>

   <dt><dfn id="category-reset" title="category-reset">Resettable elements</dfn></dt>

   <dd>

    <p>Denotes elements that can be affected when a <code><a href="the-form-element.html#the-form-element">form</a></code>
    element is <a href="constraints.html#concept-form-reset" title="concept-form-reset">reset</a>.</p>

    <!-- when updating this also update the category index -->
    <ul class="brief category-list"><li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
     <li><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code></li>
     <li><code><a href="the-output-element.html#the-output-element">output</a></code></li>
     <li><code><a href="the-select-element.html#the-select-element">select</a></code></li>
     <li><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code></li>
    </ul></dd>

  </dl><p>Some elements, not all of them <a href="#form-associated-element" title="form-associated
  element">form-associated</a>, are categorized as <dfn id="category-label" title="category-label">labelable elements</dfn>. These are elements
  that can be associated with a <code><a href="the-label-element.html#the-label-element">label</a></code> element.

  <!-- when updating this also update the category index -->
  </p><ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
   <li><code><a href="the-input-element.html#the-input-element">input</a></code> (if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is <em>not</em> in the <a href="states-of-the-type-attribute.html#hidden-state-(type=hidden)" title="attr-input-type-hidden">Hidden</a> state)</li>
   <li><code><a href="the-keygen-element.html#the-keygen-element">keygen</a></code></li>
   <li><code><a href="the-meter-element.html#the-meter-element">meter</a></code></li>
   <li><code><a href="the-output-element.html#the-output-element">output</a></code></li>
   <li><code><a href="the-progress-element.html#the-progress-element">progress</a></code></li>
   <li><code><a href="the-select-element.html#the-select-element">select</a></code></li>
   <li><code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code></li>
  </ul></body></html>
--- NEW FILE: edits.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.7 Edits &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="usage-summary.html" title="4.6.28 Usage summary" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-ins-element.html" title="4.7.1 The ins 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="usage-summary.html">&#8592; 4.6.28 Usage summary</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-ins-element.html">4.7.1 The ins element &#8594;</a>
  </div>

  <h3 id="edits"><span class="secno">4.7 </span>Edits</h3>

  <p>The <code><a href="the-ins-element.html#the-ins-element">ins</a></code> and <code><a href="the-del-element.html#the-del-element">del</a></code> elements represent
  edits to the document.</p>


  </body></html>
--- NEW FILE: the-canvas-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.8.11 The canvas element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="media-elements.html" title="4.8.10 Media elements" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-map-element.html" title="4.8.12 The map 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="media-elements.html">&#8592; 4.8.10 Media elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-map-element.html">4.8.12 The map element &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="the-canvas-element.html#the-canvas-element"><span class="secno">4.8.11 </span>The <code>canvas</code> element</a>
      <ol><li><a href="the-canvas-element.html#color-spaces-and-color-correction"><span class="secno">4.8.11.1 </span>Color spaces and color correction</a></li><li><a href="the-canvas-element.html#security-with-canvas-elements"><span class="secno">4.8.11.2 </span>Security with <code>canvas</code> elements</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="the-canvas-element"><span class="secno">4.8.11 </span>The <dfn id="canvas"><code>canvas</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#embedded-content-2">Embedded 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><a href="content-models.html#transparent">Transparent</a><!--
--><!--FORK--><!--
-->.</dd> <!-- and maybe <select>, I guess? I've left it our for now, since I guess authors might make accessible selects if they're simple enough, and it's not obvious how to distinguish the simple ones from the complex ones... -->
   <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-canvas-width"><a href="#attr-canvas-width">width</a></code></dd>
   <dd><code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code></dd>
   <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--ADD-TOPIC:DOM APIs-->
   <dd>
    <pre class="idl">interface <dfn id="htmlcanvaselement">HTMLCanvasElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute unsigned long <a href="#dom-canvas-width" title="dom-canvas-width">width</a>;
           attribute unsigned long <a href="#dom-canvas-height" title="dom-canvas-height">height</a>;

  DOMString <a href="#dom-canvas-todataurl" title="dom-canvas-toDataURL">toDataURL</a>(optional DOMString type, any... args);
  void <a href="#dom-canvas-toblob" title="dom-canvas-toBlob">toBlob</a>(<a href="infrastructure.html#filecallback">FileCallback</a>? _callback, optional DOMString type, any... args);

  object? <a href="#dom-canvas-getcontext" title="dom-canvas-getContext">getContext</a>(DOMString contextId, any... args);
};</pre>
   </dd>
  </dl><!--REMOVE-TOPIC:DOM APIs--><p>The <code><a href="#the-canvas-element">canvas</a></code> element provides scripts with a
  resolution-dependent bitmap canvas, which can be used for rendering
  graphs, game graphics, or other visual images on the fly.</p>

  <p>Authors should not use the <code><a href="#the-canvas-element">canvas</a></code> element in a
  document when a more suitable element is available. For example, it
  is inappropriate to use a <code><a href="#the-canvas-element">canvas</a></code> element to render a
  page heading: if the desired presentation of the heading is
  graphically intense, it should be marked up using appropriate
  elements (typically <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>) and then styled using CSS and
  supporting technologies such as XBL.</p>

  <p>When authors use the <code><a href="#the-canvas-element">canvas</a></code> element, they must also
  provide content that, when presented to the user, conveys
  essentially the same function or purpose as the bitmap canvas. This
  content may be placed as content of the <code><a href="#the-canvas-element">canvas</a></code>
  element. The contents of the <code><a href="#the-canvas-element">canvas</a></code> element, if any,
  are the element's <a href="content-models.html#fallback-content">fallback content</a>.</p>

  <p>In interactive visual media, if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
  <code><a href="#the-canvas-element">canvas</a></code> element, and if support for <code><a href="#the-canvas-element">canvas</a></code>
  elements has been enabled, the <code><a href="#the-canvas-element">canvas</a></code> element
  <a href="rendering.html#represents">represents</a> <a href="content-models.html#embedded-content-2">embedded content</a> consisting of
  a dynamically created image.</p>

  <p>In non-interactive, static, visual media, if the
  <code><a href="#the-canvas-element">canvas</a></code> element has been previously painted on (e.g. if
  the page was viewed in an interactive visual medium and is now being
  printed, or if some script that ran during the page layout process
  painted on the element), then the <code><a href="#the-canvas-element">canvas</a></code> element
  <a href="rendering.html#represents">represents</a> <a href="content-models.html#embedded-content-2">embedded content</a> with the
  current image and size. Otherwise, the element represents its
  <a href="content-models.html#fallback-content">fallback content</a> instead.</p>

  <p>In non-visual media, and in visual media if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
  <code><a href="#the-canvas-element">canvas</a></code> element or if support for <code><a href="#the-canvas-element">canvas</a></code>
  elements has been disabled, the <code><a href="#the-canvas-element">canvas</a></code> element
  <a href="rendering.html#represents">represents</a> its <a href="content-models.html#fallback-content">fallback content</a>
  instead.</p>

  <!-- CANVAS-FOCUS-FALLBACK -->
  <p>When a <code><a href="#the-canvas-element">canvas</a></code> element <a href="rendering.html#represents">represents</a>
  <a href="content-models.html#embedded-content-2">embedded content</a>, the user can still focus descendants
  of the <code><a href="#the-canvas-element">canvas</a></code> element (in the <a href="content-models.html#fallback-content">fallback
  content</a>). When an element is focused, it is the target of
  keyboard interaction events (even though the element itself is not
  visible). This allows authors to make an interactive canvas
  keyboard-accessible: authors should have a one-to-one mapping of
  interactive regions to focusable elements in the <a href="content-models.html#fallback-content">fallback
  content</a>. (Focus has no effect on mouse interaction
  events.) <a href="references.html#refsDOMEVENTS">[DOMEVENTS]</a></p>

  <p>The <code><a href="#the-canvas-element">canvas</a></code> element has two attributes to control the
  size of the coordinate space: <dfn id="attr-canvas-width" title="attr-canvas-width"><code>width</code></dfn> and <dfn id="attr-canvas-height" title="attr-canvas-height"><code>height</code></dfn>. These
  attributes, when specified, must have values that are <a href="common-microsyntaxes.html#valid-non-negative-integer" title="valid non-negative integer">valid non-negative
  integers</a>. <span class="impl">The <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing
  non-negative integers</a> must be used to obtain their numeric
  values. If an attribute is missing, or if parsing its value returns
  an error, then the default value must be used instead.</span> The
  <code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code> attribute defaults to
  300, and the <code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code>
  attribute defaults to 150.</p>

  <p>The intrinsic dimensions of the <code><a href="#the-canvas-element">canvas</a></code> element equal
  the size of the coordinate space, with the numbers interpreted in
  CSS pixels. However, the element can be sized arbitrarily by a
  style sheet. During rendering, the image is scaled to fit this layout
  size.</p>

  <div class="impl">

  <p>The size of the coordinate space does not necessarily represent
  the size of the actual bitmap that the user agent will use
  internally or during rendering. On high-definition displays, for
  instance, the user agent may internally use a bitmap with two device
  pixels per unit in the coordinate space, so that the rendering
  remains at high quality throughout.</p>

  <p>When the <code><a href="#the-canvas-element">canvas</a></code> element is created, and subsequently
  whenever the <code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code> and <code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code> attributes are set (whether
  to a new value or to the previous value), the bitmap and any
  associated contexts must be cleared back to their initial state and
  reinitialized with the newly specified coordinate space
  dimensions.</p>

  <p>When the canvas is initialized, its bitmap must be cleared to
  transparent black.</p>

  <p>When a <code><a href="#the-canvas-element">canvas</a></code> element does not represent its
  <a href="content-models.html#fallback-content">fallback content</a>, it <a href="infrastructure.html#provides-a-paint-source">provides a paint
  source</a> whose width is the element's intrinsic width, whose
  height is the element's intrinsic height, and whose appearance is
  the element's bitmap.</p>

  <p>The <dfn id="dom-canvas-width" title="dom-canvas-width"><code>width</code></dfn> and
  <dfn id="dom-canvas-height" title="dom-canvas-height"><code>height</code></dfn> IDL
  attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content
  attributes of the same name, with the same defaults.</p>

  </div>

  <div class="example">
   <p>Only one square appears to be drawn in the following example:</p>
   <pre>  // canvas is a reference to a &lt;canvas&gt; element
  var context = canvas.getContext('2d');
  context.fillRect(0,0,50,50);
  canvas.setAttribute('width', '300'); // clears the canvas
  context.fillRect(0,100,50,50);
  canvas.width = canvas.width; // clears the canvas
  context.fillRect(100,0,50,50); // only this square remains</pre>
  </div>

  <hr><!--ADD-TOPIC:DOM APIs--><dl class="domintro"><dt><var title="">context</var> = <var title="">canvas</var> . <code title="dom-canvas-getContext"><a href="#dom-canvas-getcontext">getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>

   <dd>

    <p>Returns an object that exposes an API for drawing on the
    canvas. The first argument specifies the desired API. Subsequent
    arguments are handled by that API.</p>

<!--2DCONTEXT-->

    <p>The list of defined contexts is given on the <a href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki
    CanvasContexts page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a>

    </p><p>Returns null if the given context ID is not supported or if the
    canvas has already been initialized with some other (incompatible)
    context type (e.g. trying to get a "<code title="canvas-context-2d">2d</code>" context after getting a
    "<code title="canvas-context-webgl">webgl</code>" context).</p>

   </dd>

  </dl><div class="impl">

  <p>A <code><a href="#the-canvas-element">canvas</a></code> element can have a <dfn id="primary-context">primary
  context</dfn>, which is the first context to have been obtained for
  that element. When created, a <code><a href="#the-canvas-element">canvas</a></code> element must not
  have a <a href="#primary-context">primary context</a>.</p>

<!--2DCONTEXT-->
  <p>The most commonly used primary context is the <a href="http://dev.w3.org/html5/2dcontext/">HTML Canvas 2D Context</a>.
<!--2DCONTEXT-->

  </p><p>The <dfn id="dom-canvas-getcontext" title="dom-canvas-getContext"><code>getContext(<var title="">contextId</var>, <var title="">args...</var>)</code></dfn>
  method of the <code><a href="#the-canvas-element">canvas</a></code> element, when invoked, must run
  the following steps:</p>

  <ol><li><p>Let <var title="">contextId</var> be the first argument to
   the method.</p></li>

   <li>

    <p>If <var title="">contextId</var> is not the name of a context
    supported by the user agent, return null and abort these
    steps.</p>

    <p class="note">An example of this would be a user agent that
    theoretically supports the "<code title="canvas-context-webgl">webgl</code>" 3D context, in the case
    where the platform does not have hardware support for OpenGL and
    the user agent does not have a software OpenGL implementation.
    Despite the user agent recognising the "<code title="canvas-context-webgl">webgl</code>" name, it would return
    null at this step because that context is not, in practice,
    supported at the time of the call.</p>

   </li>

   <li><p>If the element has a <a href="#primary-context">primary context</a> and that
   context's entry in the <a href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki
   CanvasContexts page</a> does not list <var title="">contextId</var>
   as a context with which it is compatible, return null and abort
   these steps. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p></li>

   <li><p>If the element does not have a <a href="#primary-context">primary context</a>,
   let the element's <a href="#primary-context">primary context</a> be <var title="">contextId</var>.</p></li>

   <li><p>If the <code title="dom-canvas-getContext"><a href="#dom-canvas-getcontext">getContext()</a></code> method has
   already been invoked on this element for the same <var title="">contextId</var>, return the same object as was returned
   that time, and abort these steps. The additional arguments are
   ignored.</p></li>

   <li><p><dfn id="getcontext-return" title="getContext-return">Return a new object for <var title="">contextId</var></dfn>, as defined by the specification
   given for <var title="">contextId</var>'s entry in the <a href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki
   CanvasContexts page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p></li>

  </ol><p>New context types may be registered in the <a href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki
  CanvasContexts page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p>

  <p>Anyone is free to edit the WHATWG Wiki CanvasContexts page at any
  time to add a new context type. These new context types must be
  specified with the following information:</p>

  <dl><dt>Keyword</dt>

   <dd><p>The value of <var title="">contextID</var> that will return
   the object for the new API.</p></dd>


   <dt>Specification</dt>

   <dd><p>A link to a formal specification of the context type's
   API. It could be another page on the Wiki, or a link to an external
   page. If the type does not have a formal specification, an informal
   description can be substituted until such time as a formal
   specification is available.</p></dd>


   <dt>Compatible with</dt>

   <dd><p>The list of context types that are compatible with this one
   (i.e. that operate on the same underlying bitmap). This list must
   be transitive and symmetric; if one context type is defined as
   compatible with another, then all types it is compatible with must
   be compatible with all types the other is compatible with.</p></dd>

  </dl><p>Vendors may also define experimental contexts using the syntax
  <code><var title="">vendorname</var>-<var title="">context</var></code>, for example,
  <code>moz-3d</code>. Such contexts should be registered in the
  WHATWG Wiki CanvasContexts page.</p>

  </div>

  <hr><dl class="domintro"><dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>

   <dd>

    <p>Returns a <a href="infrastructure.html#data-protocol" title="data protocol"><code title="">data:</code> URL</a> for the image in the canvas.</p>

    <p>The first argument, if provided, controls the type of the image
    to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
    type isn't supported. The other arguments are specific to the
    type, and control the way that the image is generated, as given in
    the table below.</p>

    <p>When trying to use types other than "<code>image/png</code>",
    authors can check if the image was really returned in the
    requested format by checking to see if the returned string starts
    with one of the exact strings "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". If it does, the image is PNG,
    and thus the requested type was not supported. (The one exception
    to this is if the canvas has either no height or no width, in
    which case the result might simply be "<code title="">data:,</code>".)</p>

   </dd>

   <dt><var title="">canvas</var> . <code title="dom-canvas-toBlob"><a href="#dom-canvas-toblob">toBlob</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>

   <dd>

    <p>Creates a <code><a href="infrastructure.html#blob">Blob</a></code> object representing a file
    containing the image in the canvas, and invokes a callback with a
    handle to that object.</p>

    <p>The second argument, if provided, controls the type of the
    image to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
    type isn't supported. The other arguments are specific to the
    type, and control the way that the image is generated, as given in
    the table below.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-canvas-todataurl" title="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> method
  must run the following steps:</p>

  <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href="#the-canvas-element">canvas</a></code> element's <i>origin-clean</i>
   flag is set to false, throw a <code><a href="infrastructure.html#securityerror">SecurityError</a></code> exception
   and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

   </li><li><p>If the canvas has no pixels (i.e. either its horizontal
   dimension or its vertical dimension is zero) then return the string
   "<code title="">data:,</code>" and abort these steps. (This is the
   shortest <a href="infrastructure.html#data-protocol" title="data protocol"><code title="">data:</code>
   URL</a>; it represents the empty string in a <code title="">text/plain</code> resource.)</p></li>

   <li><p>Let <var title="">file</var> be <a href="#a-serialization-of-the-image-as-a-file">a serialization of the
   image as a file</a>, using the method's arguments (if any) as
   the <var title="">arguments</var>.</p></li>

   <li><p>Return a <a href="infrastructure.html#data-protocol" title="data protocol"><code title="">data:</code> URL</a> representing <var title="">file</var>. <a href="references.html#refsRFC2397">[RFC2397]</a></p>

   <!-- should we explicitly require the URL to be base64-encoded and
   not have any parameters, to ensure the same exact URL is generated
   in each browser? -->

  </li></ol><p>The <dfn id="dom-canvas-toblob" title="dom-canvas-toBlob"><code>toBlob()</code></dfn> method
  must run the following steps:</p>

  <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href="#the-canvas-element">canvas</a></code> element's <i>origin-clean</i>
   flag is set to false, throw a <code><a href="infrastructure.html#securityerror">SecurityError</a></code> exception
   and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

   </li><li><p>Let <var title="">callback</var> be the first
   argument.</p></li>

   <li><p>Let <var title="">arguments</var> be the second and
   subsequent arguments to the method, if any.</p></li>

   <li>

    <p>If the canvas has no pixels (i.e. either its horizontal
    dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>

    <p>Otherwise, let <var title="">result</var> be a
    <code><a href="infrastructure.html#blob">Blob</a></code> object representing <a href="#a-serialization-of-the-image-as-a-file">a serialization of the
    image as a file</a>, using <var title="">arguments</var>. <a href="references.html#refsFILEAPI">[FILEAPI]</a> </p>

   </li>

   <li><p>Return, but continue running these steps
   asynchronously.</p></li>

   <li><p>If <var title="">callback</var> is null, abort these
   steps.</p></li>

   <li><p><a href="webappapis.html#queue-a-task">Queue a task</a> to invoke the
   <code><a href="infrastructure.html#filecallback">FileCallback</a></code> <var title="">callback</var> with <var title="">result</var> as its argument. The <a href="webappapis.html#task-source">task source</a>
   for this task is the <dfn id="canvas-blob-serialization-task-source">canvas blob serialization task
   source</dfn>. <a href="references.html#refsFILESYSTEMAPI">[FILESYSTEMAPI]</a></p></li>

  </ol><p>When a user agent is to create <dfn id="a-serialization-of-the-image-as-a-file">a serialization of the image
  as a file</dfn>, optionally with some given <var title="">arguments</var>, it must create an image file in the format
  given by the first value of <var title="">arguments</var>, or, if
  there are no <var title="">arguments</var>, in the PNG format. <a href="references.html#refsPNG">[PNG]</a></p>

  <p>If <var title="">arguments</var> is not empty, the first value
  must be interpreted as a <a href="infrastructure.html#mime-type" title="MIME type">MIME type</a>
  giving the format to use. If the type has any parameters, it must be
  treated as not supported.</p>

  <p class="example">For example, the value "<code>image/png</code>" would
  mean to generate a PNG image, the value "<code>image/jpeg</code>"
  would mean to generate a JPEG image, and the value
  "<code>image/svg+xml</code>" would mean to generate an SVG image
  (which would probably require that the implementation actually keep
  enough information to reliably render an SVG image from the canvas).</p>

  <p>User agents must support PNG ("<code>image/png</code>"). User
  agents may support other types. If the user agent does not support
  the requested type, it must create the file using the PNG format. <a href="references.html#refsPNG">[PNG]</a></p>

  <p>User agents must <a href="infrastructure.html#converted-to-ascii-lowercase" title="converted to ASCII
  lowercase">convert the provided type to ASCII lowercase</a>
  before establishing if they support that type.</p>

  <p>For image types that do not support an alpha channel, the
  serialized image must be the canvas image composited onto a solid
  black background using the source-over operator.</p>

  <p>If the first argument in <var title="">arguments</var> gives a
  type corresponding to one of the types given in the first column of
  the following table, and the user agent supports that type, then the
  subsequent arguments, if any, must be treated as described in the
  second cell of that row.</p>

  </div>

  <table><thead><tr><th> Type </th><th> Other arguments </th><th> Reference
   </th></tr></thead><tbody><tr><td> <code>image/jpeg</code>
     </td><td> The second argument<span class="impl">, if it</span> is a
     number in the range 0.0 to 1.0 inclusive<span class="impl">, must
     be</span> treated as the desired quality level. <span class="impl">If it is not a number or is outside that range, the
     user agent must use its default value, as if the argument had
     been omitted.</span>
     </td><td> <a href="references.html#refsJPEG">[JPEG]</a>
  </td></tr></tbody></table><div class="impl">

  <p>For the purposes of these rules, an argument is considered to be
  a number if it is converted to an IDL double value by the rules for
  handling arguments of type <code title="">any</code> in the Web IDL
  specification. <a href="references.html#refsWEBIDL">[WEBIDL]</a></p>

  <p>Other arguments must be ignored and must not cause the user agent
  to throw an exception. A future version of this specification will
  probably define other parameters to be passed to these methods to
  allow authors to more carefully control compression settings, image
  metadata, etc.</p>

  </div>
  <!--REMOVE-TOPIC:DOM APIs-->


  <!--2DCONTEXT-->

  <div class="impl">

  <h5 id="color-spaces-and-color-correction"><span class="secno">4.8.11.1 </span>Color spaces and color correction</h5>

  <p>The <code><a href="#the-canvas-element">canvas</a></code> APIs must perform color correction at
  only two points: when rendering images with their own gamma
  correction and color space information onto the canvas, to convert
  the image to the color space used by the canvas (e.g. using the 2D
  Context's <code title="dom-context-2d-drawImage">drawImage()</code>
  method with an <code><a href="the-img-element.html#htmlimageelement">HTMLImageElement</a></code> object), and when
  rendering the actual canvas bitmap to the output device.</p>

  <p class="note">Thus, in the 2D context, colors used to draw shapes
  onto the canvas will exactly match colors obtained through the <code title="dom-context-2d-getImageData">getImageData()</code>
  method.</p>

  <p>The <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL()</a></code> method
  must not include color space information in the resource
  returned. Where the output format allows it, the color of pixels in
  resources created by <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL()</a></code> must match those
  returned by the <code title="dom-context-2d-getImageData">getImageData()</code>
  method.</p>

  <p>In user agents that support CSS, the color space used by a
  <code><a href="#the-canvas-element">canvas</a></code> element must match the color space used for
  processing any colors for that element in CSS.</p>

  <p>The gamma correction and color space information of images must
  be handled in such a way that an image rendered directly using an
  <code><a href="the-img-element.html#the-img-element">img</a></code> element would use the same colors as one painted on
  a <code><a href="#the-canvas-element">canvas</a></code> element that is then itself
  rendered. Furthermore, the rendering of images that have no color
  correction information (such as those returned by the <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL()</a></code> method) must be
  rendered with no color correction.</p>

  <p class="note">Thus, in the 2D context, calling the <code title="dom-context-2d-drawImage">drawImage()</code> method to render
  the output of the <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL()</a></code> method to the
  canvas, given the appropriate dimensions, has no visible effect.</p>

  </div>


<!--ADD-TOPIC:Security-->
  <div class="impl">

  <h5 id="security-with-canvas-elements"><span class="secno">4.8.11.2 </span>Security with <code><a href="#the-canvas-element">canvas</a></code> elements</h5>

  <p><strong>Information leakage</strong> can occur if scripts from
  one <a href="browsers.html#origin-0">origin</a> can access information (e.g. read pixels)
  from images from another origin (one that isn't the <a href="browsers.html#same-origin" title="same origin">same</a>).</p>

  <p>To mitigate this, <code><a href="#the-canvas-element">canvas</a></code> elements are defined to
  have a flag indicating whether they are <i>origin-clean</i>. All
  <code><a href="#the-canvas-element">canvas</a></code> elements must start with their
  <i>origin-clean</i> set to true. The flag must be set to false if
  any of the following actions occur:</p>

  <ul><li><p>The element's 2D context's <code title="dom-context-2d-drawImage">drawImage()</code> method is
   called with an <code><a href="the-img-element.html#htmlimageelement">HTMLImageElement</a></code> or an
   <code><a href="the-video-element.html#htmlvideoelement">HTMLVideoElement</a></code> whose <a href="browsers.html#origin-0">origin</a> is not the
   <a href="browsers.html#same-origin" title="same origin">same</a> as that of the
   <code><a href="dom.html#document">Document</a></code> object that owns the <code><a href="#the-canvas-element">canvas</a></code>
   element.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-drawImage">drawImage()</code> method is
   called with an <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose
   <i>origin-clean</i> flag is false.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-fillStyle">fillStyle</code> attribute is set
   to a <code>CanvasPattern</code> object that was created from an
   <code><a href="the-img-element.html#htmlimageelement">HTMLImageElement</a></code> or an <code><a href="the-video-element.html#htmlvideoelement">HTMLVideoElement</a></code>
   whose <a href="browsers.html#origin-0">origin</a> was not the <a href="browsers.html#same-origin" title="same
   origin">same</a> as that of the <code><a href="dom.html#document">Document</a></code> object
   that owns the <code><a href="#the-canvas-element">canvas</a></code> element when the pattern was
   created.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-fillStyle">fillStyle</code> attribute is set
   to a <code>CanvasPattern</code> object that was created from an
   <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   false when the pattern was created.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-strokeStyle">strokeStyle</code> attribute is
   set to a <code>CanvasPattern</code> object that was created from an
   <code><a href="the-img-element.html#htmlimageelement">HTMLImageElement</a></code> or an <code><a href="the-video-element.html#htmlvideoelement">HTMLVideoElement</a></code>
   whose <a href="browsers.html#origin-0">origin</a> was not the <a href="browsers.html#same-origin" title="same
   origin">same</a> as that of the <code><a href="dom.html#document">Document</a></code> object
   that owns the <code><a href="#the-canvas-element">canvas</a></code> element when the pattern was
   created.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-strokeStyle">strokeStyle</code> attribute is
   set to a <code>CanvasPattern</code> object that was created from an
   <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   false when the pattern was created.</p></li>

   <li><p>The element's 2D context's <code title="dom-context-2d-fillText">fillText()</code> or <code title="dom-context-2d-fillText">strokeText()</code> methods are
   invoked and consider using a font that has an <a href="browsers.html#origin-0">origin</a>
   that is not the <a href="browsers.html#same-origin" title="same origin">same</a> as that of
   the <code><a href="dom.html#document">Document</a></code> object that owns the <code><a href="#the-canvas-element">canvas</a></code>
   element. (The font doesn't even have to be used; all that matters
   is whether the font was considered for any of the glyphs
   drawn.)</p></li> <!-- because fonts could consider sensitive
   material, I guess; and because that sensitivity could extend to
   whether or not a particular glyph is in the font in the first
   place. -->

  </ul><p>The <code title="dom-canvas-toDataURL"><a href="#dom-canvas-todataurl">toDataURL()</a></code>, <code title="dom-canvas-toBlob"><a href="#dom-canvas-toblob">toBlob()</a></code>, and <code title="dom-context-2d-getImageData">getImageData()</code> methods
  check the flag and will throw a <code><a href="infrastructure.html#securityerror">SecurityError</a></code> exception
  rather than leak cross-origin data.</p>

  <p class="note">Even resetting the canvas state by changing its
  <code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code> or <code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code> attributes doesn't reset
  the <i>origin-clean</i> flag.</p>

  </div>
<!--REMOVE-TOPIC:Security-->


<!--TOPIC:HTML-->
  </body></html>
--- NEW FILE: commands.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.11.5 Commands &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1470 lines suppressed...]
   </td></tr><tr><th>Canonical order:
    </th><td> per grammar
  </td></tr></table><p>The 'anchor-point' property specifies a point to which dialog
  boxes are to be aligned.</p>

  <p>If the value is a &lt;position&gt;, the alignment point is the point
  given by the value, which must be interpreted relative to the
  element's first rendered box's margin box. Percentages must be
  calculated relative to the element's first rendered box's margin box
  (specifically, its width for the horizontal position and its height
  for the vertical position). <a href="references.html#refsCSSVALUES">[CSSVALUES]</a>
  <a href="references.html#refsCSS">[CSS]</a></p>

  <p>If the value is the keyword 'none', then no explicit alignment
  point is defined. The user agent will pick an alignment point
  automatically if necessary (as described in the definition of the
  <code title="dom-dialog-open"><a href="#dom-dialog-open">open()</a></code> method above).</p>


  </body></html>
--- NEW FILE: the-samp-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.13 The samp element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-var-element.html" title="4.6.12 The var element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-kbd-element.html" title="4.6.14 The kbd 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-var-element.html">&#8592; 4.6.12 The var element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-kbd-element.html">4.6.14 The kbd element &#8594;</a>
  </div>

  <h4 id="the-samp-element"><span class="secno">4.6.13 </span>The <dfn><code>samp</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-samp-element">samp</a></code> element <a href="rendering.html#represents">represents</a> (sample)
  output from a program or computing system.</p>

  <p class="note">See the <code><a href="the-pre-element.html#the-pre-element">pre</a></code> and <code><a href="the-kbd-element.html#the-kbd-element">kbd</a></code>
  elements for more details.</p>

  <div class="example">
   <p>This example shows the <code><a href="#the-samp-element">samp</a></code> element being used
   inline:</p>
   <pre>&lt;p&gt;The computer said &lt;samp&gt;Too much cheese in tray
two&lt;/samp&gt; but I didn't know what that meant.&lt;/p&gt;</pre>

   <p>This second example shows a block of sample output. Nested
   <code><a href="#the-samp-element">samp</a></code> and <code><a href="the-kbd-element.html#the-kbd-element">kbd</a></code> elements allow for the
   styling of specific elements of the sample output using a
   style sheet.</p>

   <pre>&lt;pre&gt;&lt;samp&gt;&lt;span class="prompt"&gt;jdoe@mowmow:~$&lt;/span&gt; &lt;kbd&gt;ssh demo.example.com&lt;/kbd&gt;
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

&lt;span class="prompt"&gt;jdoe@demo:~$&lt;/span&gt; &lt;span class="cursor"&gt;_&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
  </div>


  </body></html>
--- NEW FILE: the-u-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.18 The u element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-b-element.html" title="4.6.17 The b element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-mark-element.html" title="4.6.19 The mark 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-b-element.html">&#8592; 4.6.17 The b element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-mark-element.html">4.6.19 The mark element &#8594;</a>
  </div>

  <h4 id="the-u-element"><span class="secno">4.6.18 </span>The <dfn><code>u</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-u-element">u</a></code> element <a href="rendering.html#represents">represents</a> a span of text
  with an unarticulated, though explicitly rendered, non-textual
  annotation, such as labeling the text as being a proper name in
  Chinese text (a Chinese proper name mark), or labeling the text as
  being misspelt.</p>

  <p>In most cases, another element is likely to be more appropriate:
  for marking stress emphasis, the <code><a href="the-em-element.html#the-em-element">em</a></code> element should be
  used; for marking key words or phrases either the <code><a href="the-b-element.html#the-b-element">b</a></code>
  element or the <code><a href="the-mark-element.html#the-mark-element">mark</a></code> element should be used, depending
  on the context; for marking book titles, the <code><a href="the-cite-element.html#the-cite-element">cite</a></code>
  element should be used<!-- even for the Chinese wavy underline 'book
  title mark' -->; for labeling text with explicit textual
  annotations, the <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element should be used; for
  labeling ship names in Western texts, the <code><a href="the-i-element.html#the-i-element">i</a></code> element
  should be used.</p>

  <p class="note">The default rendering of the <code><a href="#the-u-element">u</a></code> element
  in visual presentations clashes with the conventional rendering of
  hyperlinks (underlining). Authors are encouraged to avoid using the
  <code><a href="#the-u-element">u</a></code> element where it could be confused for a
  hyperlink.</p>




  </body></html>
--- NEW FILE: headings-and-sections.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.11 Headings and sections &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-address-element.html" title="4.4.10 The address element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="grouping-content.html" title="4.5 Grouping content" 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-address-element.html">&#8592; 4.4.10 The address element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="grouping-content.html">4.5 Grouping content &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="headings-and-sections.html#headings-and-sections"><span class="secno">4.4.11 </span>Headings and sections</a>
      <ol><li><a href="headings-and-sections.html#outlines"><span class="secno">4.4.11.1 </span>Creating an outline</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="headings-and-sections"><span class="secno">4.4.11 </span><dfn>Headings and sections</dfn></h4>

  <p>The <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>&#8211;<code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> elements and the
  <code><a href="the-hgroup-element.html#the-hgroup-element">hgroup</a></code> element are headings.</p>

  <p>The first element of <a href="content-models.html#heading-content-0">heading content</a> in an element
  of <a href="content-models.html#sectioning-content-0">sectioning content</a> <a href="rendering.html#represents">represents</a> the
  heading for that section. Subsequent headings of equal or higher
  <a href="the-aside-element.html#rank">rank</a> start new (implied) sections, headings of lower
  <a href="the-aside-element.html#rank">rank</a> start implied subsections that are part of the
  previous one. In both cases, the element <a href="rendering.html#represents">represents</a> the
  heading of the implied section.</p>

  <p>Certain elements are said to be <dfn id="sectioning-root" title="sectioning
  root">sectioning roots</dfn>, including <code><a href="the-blockquote-element.html#the-blockquote-element">blockquote</a></code> and
  <code><a href="the-td-element.html#the-td-element">td</a></code> elements. These elements can have their own
  outlines, but the sections and headings inside these elements do not
  contribute to the outlines of their ancestors.</p>

  <!-- when updating this also update the category index -->
  <ul class="brief category-list"><li><code><a href="the-blockquote-element.html#the-blockquote-element">blockquote</a></code></li>
   <li><code><a href="the-body-element.html#the-body-element">body</a></code></li>
   <li><code><a href="the-details-element.html#the-details-element">details</a></code></li>
   <li><code><a href="commands.html#the-dialog-element">dialog</a></code></li>
   <li><code><a href="the-fieldset-element.html#the-fieldset-element">fieldset</a></code></li>
   <li><code><a href="the-figure-element.html#the-figure-element">figure</a></code></li>
   <li><code><a href="the-td-element.html#the-td-element">td</a></code></li>
  </ul><!-- a root element isn't a sectioning root. This means, for
  instance, that you don't get an outline if you just have a random
  XML file with <html:h1> elements in it. Other vocabs need to define
  what their sectioning root is. --><p><a href="content-models.html#sectioning-content-0">Sectioning content</a> elements are always considered
  subsections of their nearest ancestor <a href="#sectioning-root">sectioning root</a>
  or their nearest ancestor element of <a href="content-models.html#sectioning-content-0">sectioning
  content</a>, whichever is nearest, regardless of what implied
  sections other headings may have created.</p>

  <div class="example">
   <p>For the following fragment:</p>
   <pre>&lt;body&gt;
 &lt;h1&gt;Foo&lt;/h1&gt;
 &lt;h2&gt;Bar&lt;/h2&gt;
 &lt;blockquote&gt;
  &lt;h3&gt;Bla&lt;/h3&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Baz&lt;/p&gt;
 &lt;h2&gt;Quux&lt;/h2&gt;
 &lt;section&gt;
  &lt;h3&gt;Thud&lt;/h3&gt;
 &lt;/section&gt;
 &lt;p&gt;Grunt&lt;/p&gt;
&lt;/body&gt;</pre>
   <p>...the structure would be:</p>
   <ol><li>
     Foo (heading of explicit <code><a href="the-body-element.html#the-body-element">body</a></code> section, containing the "Grunt" paragraph)
     <ol><li>
       Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
      </li>
      <li>
       Quux (heading starting implied section with no content other than the heading itself)
      </li>
      <li>
       Thud (heading of explicit <code><a href="the-section-element.html#the-section-element">section</a></code> section)
      </li>
     </ol></li>
   </ol><p>Notice how the <code><a href="the-section-element.html#the-section-element">section</a></code> ends the earlier implicit
   section so that a later paragraph ("Grunt") is back at the top
   level.</p>
  </div>

  <p>Sections may contain headings of any <a href="the-aside-element.html#rank">rank</a>, but
  authors are strongly encouraged to either use only <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>
  elements, or to use elements of the appropriate <a href="the-aside-element.html#rank">rank</a>
  for the section's nesting level.</p>

  <p>Authors are also encouraged to explicitly wrap sections in
  elements of <a href="content-models.html#sectioning-content-0">sectioning content</a>, instead of relying on
  the implicit sections generated by having multiple headings in one
  element of <a href="content-models.html#sectioning-content-0">sectioning content</a>.</p>

  <div class="example">
   <p>For example, the following is correct:</p>

   <pre>&lt;body&gt;
 &lt;h4&gt;Apples&lt;/h4&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;h6&gt;Sweet&lt;/h6&gt;
  &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;h1&gt;Color&lt;/h1&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>However, the same document would be more clearly expressed
   as:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;Apples&lt;/h1&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;section&gt;
   &lt;h3&gt;Sweet&lt;/h3&gt;
   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h2&gt;Color&lt;/h2&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>Both of the documents above are semantically identical and would
   produce the same outline in compliant user agents.</p>

   <p>This third example is also semantically identical, and might be
   easier to maintain (e.g. if sections are often moved around in
   editing):</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;Apples&lt;/h1&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Taste&lt;/h1&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;section&gt;
   &lt;h1&gt;Sweet&lt;/h1&gt;
   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Color&lt;/h1&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>This final example would need explicit style rules to be
   rendered well in legacy browsers. Legacy browsers without CSS
   support would render all the headings as top-level headings.</p>

  </div>


  <h5 id="outlines"><span class="secno">4.4.11.1 </span>Creating an outline</h5>

  <div class="impl">

  <!-- v2 idea: It would be nice if there was a way to use this to
  autogenerate a table of contents or some such -->

  <p>This section defines an algorithm for creating an outline for a
  <a href="content-models.html#sectioning-content-0">sectioning content</a> element or a <a href="#sectioning-root">sectioning
  root</a> element. It is defined in terms of a walk over the nodes
  of a DOM tree, in tree order, with each node being visited when it
  is <i>entered</i> and when it is <i>exited</i> during the walk.</p>

  </div>

  <p>The <dfn id="outline">outline</dfn> for a <a href="content-models.html#sectioning-content-0">sectioning content</a>
  element or a <a href="#sectioning-root">sectioning root</a> element consists of a list
  of one or more potentially nested <a href="#concept-section" title="concept-section">sections</a>. A <dfn id="concept-section" title="concept-section">section</dfn> is a container that
  corresponds to some nodes in the original DOM tree. Each section can
  have one heading associated with it, and can contain any number of
  further nested sections. <span class="impl">The algorithm for the
  outline also associates each node in the DOM tree with a particular
  section and potentially a heading.</span> (The sections in the
  outline aren't <code><a href="the-section-element.html#the-section-element">section</a></code> elements, though some may
  correspond to such elements &#8212; they are merely conceptual
  sections.)</p>

  <div class="example">

   <p>The following markup fragment:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;A&lt;/h1&gt;
 &lt;p&gt;B&lt;/p&gt;
 &lt;h2&gt;C&lt;/h2&gt;
 &lt;p&gt;D&lt;/p&gt;
 &lt;h2&gt;E&lt;/h2&gt;
 &lt;p&gt;F&lt;/p&gt;
&lt;/body&gt;</pre>

   <p>...results in the following outline being created for the
   <code><a href="the-body-element.html#the-body-element">body</a></code> node (and thus the entire document):</p>

   <ol class="brief"><li>
     <p>Section created for <code><a href="the-body-element.html#the-body-element">body</a></code> node.</p>
     <p>Associated with heading "A".</p>
     <p>Also associated with paragraph "B".</p>
     <p>Nested sections:</p>
     <ol class="brief"><li>
       <p>Section implied for first <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code> element.</p>
       <p>Associated with heading "C".</p>
       <p>Also associated with paragraph "D".</p>
       <p>No nested sections.</p>
      </li>
      <li>
       <p>Section implied for second <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code> element.</p>
       <p>Associated with heading "E".</p>
       <p>Also associated with paragraph "F".</p>
       <p>No nested sections.</p>
      </li>
     </ol></li>
   </ol></div>

  <div class="impl">

  <p>The algorithm that must be followed during a walk of a DOM
  subtree rooted at a <a href="content-models.html#sectioning-content-0">sectioning content</a> element or a
  <a href="#sectioning-root">sectioning root</a> element to determine that element's
  <a href="#outline">outline</a> is as follows:</p>

  <ol><li><p>Let <var title="">current outlinee</var> be null. (It holds
   the element whose <a href="#outline">outline</a> is being created.)</p></li>

   <li><p>Let <var title="">current section</var> be null. (It holds a
   pointer to a <a href="#concept-section" title="concept-section">section</a>, so that
   elements in the DOM can all be associated with a section.)</p></li>

   <li><p>Create a stack to hold elements, which is used to handle
   nesting. Initialize this stack to empty.</p></li>

   <li>

    <p>As you walk over the DOM in <a href="infrastructure.html#tree-order">tree order</a>, starting
    with the <a href="content-models.html#sectioning-content-0">sectioning content</a> element or
    <a href="#sectioning-root">sectioning root</a> element at the root of the subtree
    for which an outline is to be created, trigger the first relevant
    step below for each element as you enter and exit it.</p>

    <dl class="switch"><dt>If you are exiting an element and that element is the element
     at the top of the stack</dt>

     <dd>

      <p class="note">The element being exited is a <a href="content-models.html#heading-content-0">heading
      content</a> element.</p>

      <p>Pop that element from the stack.</p>

     </dd>


     <dt>If the top of the stack is a <a href="content-models.html#heading-content-0">heading content</a>
     element</dt>

     <dd><p>Do nothing.</p></dd>


     <dt>When entering a <a href="content-models.html#sectioning-content-0">sectioning content</a> element or a
     <a href="#sectioning-root">sectioning root</a> element</dt>

     <dd>

      <p>If <var title="">current outlinee</var> is not null, and the
      <var title="">current section</var> has no heading, create an
      implied heading and let that be the heading for the <var title="">current section</var>.</p>

      <p>If <var title="">current outlinee</var> is not null, push
      <var title="">current outlinee</var> onto the stack.</p>

      <p>Let <var title="">current outlinee</var> be the element
      that is being entered.</p>

      <p>Let <var title="">current section</var> be a newly created
      <a href="#concept-section" title="concept-section">section</a> for the <var title="">current outlinee</var> element.</p>

      <p>Associate <var title="">current outlinee</var> with <var title="">current section</var>.</p>

      <p>Let there be a new <a href="#outline">outline</a> for the new <var title="">current outlinee</var>, initialized with just the new
      <var title="">current section</var> as the only <a href="#concept-section" title="concept-section">section</a> in the outline.</p>

     </dd>


     <dt>When exiting a <a href="content-models.html#sectioning-content-0">sectioning content</a> element, if
     the stack is not empty</dt>

     <dd>

      <p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p>

      <p>Let <var title="">current section</var> be the last section
      in the <a href="#outline">outline</a> of the <var title="">current
      outlinee</var> element.</p>

      <p>Append the <a href="#outline">outline</a> of the <a href="content-models.html#sectioning-content-0">sectioning
      content</a> element being exited to the <var title="">current
      section</var>. (This does not change which section is the last
      section in the <a href="#outline">outline</a>.)</p>

     </dd>


     <dt>When exiting a <a href="#sectioning-root">sectioning root</a> element, if the
     stack is not empty</dt>

     <dd>

      <p>Run these steps:</p>

      <ol><li><p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p></li>

       <li><p>Let <var title="">current section</var> be the last
       section in the <a href="#outline">outline</a> of the <var title="">current
       outlinee</var> element.</p></li>

       <li><p><i>Finding the deepest child</i>: If <var title="">current section</var> has no child sections, stop
       these steps.</p></li>

       <li><p>Let <var title="">current section</var> be the last
       child <a href="#concept-section" title="concept-section">section</a> of the
       current <var title="">current section</var>.</p></li>

       <li><p>Go back to the substep labeled <i>finding the deepest
       child</i>.</p></li>

      </ol></dd>


     <dt>When exiting a <a href="content-models.html#sectioning-content-0">sectioning content</a> element or a
     <a href="#sectioning-root">sectioning root</a> element</dt>

     <dd>

      <p class="note">The <var title="">current outlinee</var> is the
      element being exited, and it is the <a href="content-models.html#sectioning-content-0">sectioning
      content</a> element or a <a href="#sectioning-root">sectioning root</a> element
      at the root of the subtree for which an outline is being
      generated.</p>

      <p>Let <var title="">current section</var> be the first <a href="#concept-section" title="concept-section">section</a> in the
      <a href="#outline">outline</a> of the <var title="">current outlinee</var>
      element.</p>

      <p>Skip to the next step in the overall set of steps. (The walk
      is over.)</p>

     </dd>


     <dt>When entering a <a href="content-models.html#heading-content-0">heading content</a> element</dt>

     <dd>

      <p>If the <var title="">current section</var> has no heading,
      let the element being entered be the heading for the <var title="">current section</var>.</p>

      <p>Otherwise, if the element being entered has a
      <a href="the-aside-element.html#rank">rank</a> equal to or greater than the heading of the
      last section of the <a href="#outline">outline</a> of the <var title="">current outlinee</var>, then create a new <a href="#concept-section" title="concept-section">section</a> and append it to the
      <a href="#outline">outline</a> of the <var title="">current outlinee</var>
      element, so that this new section is the new last section of
      that outline. Let <var title="">current section</var> be that
      new section. Let the element being entered be the new heading
      for the <var title="">current section</var>.</p>

      <p>Otherwise, run these substeps:</p>

      <ol><li><p>Let <var title="">candidate section</var> be <var title="">current section</var>.</p></li>

       <li><p>If the element being entered has a <a href="the-aside-element.html#rank">rank</a>
       lower than the <a href="the-aside-element.html#rank">rank</a> of the heading of the <var title="">candidate section</var>, then create a new <a href="#concept-section" title="concept-section">section</a>, and append it to <var title="">candidate section</var>. (This does not change which
       section is the last section in the outline.) Let <var title="">current section</var> be this new section. Let the
       element being entered be the new heading for the <var title="">current section</var>. Abort these substeps.</p>

       </li><li><p>Let <var title="">new candidate section</var> be the
       <a href="#concept-section" title="concept-section">section</a> that contains <var title="">candidate section</var> in the <a href="#outline">outline</a> of
       <var title="">current outlinee</var>.</p></li>

       <li><p>Let <var title="">candidate section</var> be <var title="">new candidate section</var>.</p></li>

       <li><p>Return to step 2.</p></li>

      </ol><p>Push the element being entered onto the stack. (This causes
      the algorithm to skip any descendants of the element.)</p>

      <p class="note">Recall that <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code> has the
      <em>highest</em> rank, and <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> has the lowest
      rank.</p>

     </dd>


     <dt>Otherwise</dt>

     <dd><p>Do nothing.</p></dd>

    </dl><p id="associatedSection">In addition, whenever you exit a node,
    after doing the steps above, if the node is not associated with a
    <a href="#concept-section" title="concept-section">section</a> yet, associate the
    node with the <a href="#concept-section" title="concept-section">section</a> <var title="">current section</var>.</p>

   </li>

   <li><p>Associate all nodes with the heading of the <a href="#concept-section" title="concept-section">section</a> with which they are
   associated, if any.</p></li>

  </ol><p>The tree of sections created by the algorithm above, or a proper
  subset thereof, must be used when generating document outlines, for
  example when generating tables of contents.</p>

  <p>The outline created for <a href="dom.html#the-body-element-0">the body element</a> of a
  <code><a href="dom.html#document">Document</a></code> is the <a href="#outline">outline</a> of the entire
  document.</p>

  <p>When creating an interactive table of contents, entries should
  jump the user to the relevant <a href="content-models.html#sectioning-content-0">sectioning content</a>
  element, if the <a href="#concept-section" title="concept-section">section</a> was
  created for a real element in the original document, or to the
  relevant <a href="content-models.html#heading-content-0">heading content</a> element, if the <a href="#concept-section" title="concept-section">section</a> in the tree was generated for
  a heading in the above process.</p>

  <p class="note">Selecting the first <a href="#concept-section" title="concept-section">section</a> of the document therefore
  always takes the user to the top of the document, regardless of
  where the first heading in the <code><a href="the-body-element.html#the-body-element">body</a></code> is to be found.</p>

  <p>The <dfn id="outline-depth">outline depth</dfn> of a <a href="content-models.html#heading-content-0">heading content</a>
  element associated with a <a href="#concept-section" title="concept-section">section</a> <var title="">section</var>
  is the number of <a href="#concept-section" title="concept-section">sections</a> that
  are ancestors of <var title="">section</var> in the
  <a href="#outline">outline</a> that <var title="">section</var> finds itself
  in when the <a href="#outline" title="outline">outlines</a> of its
  <code><a href="dom.html#document">Document</a></code>'s elements are created, plus 1. The
  <a href="#outline-depth">outline depth</a> of a <a href="content-models.html#heading-content-0">heading content</a> element
  not associated with a <a href="#concept-section" title="concept-section">section</a>
  is 1.</p>

  <p>User agents should provide default headings for sections that do
  not have explicit section headings.</p>

  <div class="example">

   <p>Consider the following snippet:</p>

   <pre>&lt;body&gt;
 &lt;nav&gt;
  &lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
 &lt;/nav&gt;
 &lt;p&gt;Hello world.&lt;/p&gt;
 &lt;aside&gt;
  &lt;p&gt;My cat is cute.&lt;/p&gt;
 &lt;/aside&gt;
&lt;/body&gt;</pre>

   <p>Although it contains no headings, this snippet has three
   sections: a document (the <code><a href="the-body-element.html#the-body-element">body</a></code>) with two subsections
   (a <code><a href="the-nav-element.html#the-nav-element">nav</a></code> and an <code><a href="the-aside-element.html#the-aside-element">aside</a></code>). A user agent could
   present the outline as follows:</p>

   <ol class="brief"><li>Untitled document
     <ol><li>Navigation</li>
      <li>Sidebar</li>
     </ol></li>
   </ol><p>These default headings ("Untitled document", "Navigation",
   "Sidebar") are not specified by this specification, and might vary
   with the user's language, the page's language, the user's
   preferences, the user agent implementor's preferences, etc.</p>

  </div>

  <div class="note">

   <p>The following JavaScript function shows how the tree walk could
   be implemented. The <var title="">root</var> argument is the root
   of the tree to walk (either a <a href="content-models.html#sectioning-content-0">sectioning content</a>
   element or a <a href="#sectioning-root">sectioning root</a> element), and the <var title="">enter</var> and <var title="">exit</var> arguments are
   callbacks that are called with the nodes as they are entered and
   exited. <a href="references.html#refsECMA262">[ECMA262]</a></p>

   <pre>function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node == root) {
        node = null;
      } else if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      } else {
        node = node.parentNode;
      }
    }
  }
}</pre>

  </div>

  </div>



  </body></html>
--- NEW FILE: obsolete.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>11 Obsolete features &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...1814 lines suppressed...]
   for <code title="dom-document-all"><a href="#dom-document-all">all</a></code>.</p></li>

  </ul><p class="note">These requirements are a <a href="introduction.html#willful-violation">willful
  violation</a> of the JavaScript specification current at the time
  of writing (ECMAScript edition 5). The JavaScript specification
  requires that the ToBoolean() operator convert all objects to the
  true value, and does not have provisions for objects acting as if
  they were <code title="">undefined</code> for the purposes of
  certain operators. This violation is motivated by a desire for
  compatibility with two classes of legacy content: one that uses the
  presence of <code title="dom-document-all"><a href="#dom-document-all">document.all</a></code> as a
  way to detect legacy user agents, and one that only supports those
  legacy user agents and uses the <code title="dom-document-all"><a href="#dom-document-all">document.all</a></code> object without testing
  for its presence first. <a href="references.html#refsECMA262">[ECMA262]</a></p>

  </div>



  </body></html>
--- NEW FILE: named-character-references.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>8.5 Named character references &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-end.html" title="8.2.6 The end" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-xhtml-syntax.html" title="9 The XHTML syntax" 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-end.html">&#8592; 8.2.6 The end</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-xhtml-syntax.html">9 The XHTML syntax &#8594;</a>
  </div>

  <h3 id="named-character-references"><span class="secno">8.5 </span><dfn>Named character references</dfn></h3>

  <p>This table lists the character reference names that are supported
  by HTML, and the code points to which they refer. It is referenced
  by the previous sections.</p>

  <div id="named-character-references-table">
   <table><thead><tr><th> Name </th> <th> Character(s) </th> <th> Glyph </th> </tr></thead><!--BOILERPLATE entities.inc--></table><!--
   If we want to add character references, Almorca suggests:
   > I would add &sub1; (character U+2081), &sub2;
   > (character U+2082) and &sub3; (character U+2083). They
   > would are the equivalent to &sup1;, &sup2;, and &sup3;.
   See also: http://www.w3.org/2003/entities/
  --></div>

  <p>This data is also available <a href="entities.json">as a JSON
  file</a>.</p>

  <p><i>The glyphs displayed above are non-normative. Refer to the
  Unicode specifications for formal definitions of the characters
  listed above.</i></p>



  </body></html>
--- NEW FILE: the-button-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.8 The button element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="common-input-element-apis.html" title="4.10.7.4 Common input element APIs" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-select-element.html" title="4.10.9 The select 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="common-input-element-apis.html">&#8592; 4.10.7.4 Common input element APIs</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-select-element.html">4.10.9 The select element &#8594;</a>
  </div>

  <h4 id="the-button-element"><span class="secno">4.10.8 </span>The <dfn><code>button</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#interactive-content-0">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, and <a href="forms.html#category-submit" title="category-submit">submittable</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#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>, 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-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-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-fs-formaction"><a href="form-submission.html#attr-fs-formaction">formaction</a></code></dd>
   <dd><code title="attr-fs-formenctype"><a href="form-submission.html#attr-fs-formenctype">formenctype</a></code></dd>
   <dd><code title="attr-fs-formmethod"><a href="form-submission.html#attr-fs-formmethod">formmethod</a></code></dd>
   <dd><code title="attr-fs-formnovalidate"><a href="form-submission.html#attr-fs-formnovalidate">formnovalidate</a></code></dd>
   <dd><code title="attr-fs-formtarget"><a href="form-submission.html#attr-fs-formtarget">formtarget</a></code></dd>
   <dd><code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-button-type"><a href="#attr-button-type">type</a></code></dd>
   <dd><code title="attr-button-value"><a href="#attr-button-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">interface <dfn id="htmlbuttonelement">HTMLButtonElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute boolean <a href="attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-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="form-submission.html#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
           attribute boolean <a href="form-submission.html#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
           attribute DOMString <a href="form-submission.html#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
           attribute DOMString <a href="attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute DOMString <a href="#dom-button-type" title="dom-button-type">type</a>;
           attribute DOMString <a href="#dom-button-value" title="dom-button-value">value</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);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-button-element">button</a></code> element <a href="rendering.html#represents">represents</a> a button.</p>

  <p>The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p>

  <p>The <dfn id="attr-button-type" title="attr-button-type"><code>type</code></dfn>
  attribute controls the behavior of the button when it is activated.
  It is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following table
  lists the keywords and states for the attribute &#8212; the keywords
  in the left column map to the states in the cell in the second
  column on the same row as the keyword.</p>

  <table><thead><tr><th> Keyword
     </th><th> State
     </th><th> Brief description
   </th></tr></thead><tbody><tr><td><dfn id="attr-button-type-submit" title="attr-button-type-submit"><code>submit</code></dfn>
     </td><td><a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
     </td><td>Submits the form.
    </td></tr><tr><td><dfn id="attr-button-type-reset" title="attr-button-type-reset"><code>reset</code></dfn>
     </td><td><a href="#attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</a>
     </td><td>Resets the form.
    </td></tr><tr><td><dfn id="attr-button-type-button" title="attr-button-type-button"><code>button</code></dfn>
     </td><td><a href="#attr-button-type-button-state" title="attr-button-type-button-state">Button</a>
     </td><td>Does nothing.
  </td></tr></tbody></table><p>The <i>missing value default</i> is the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state.</p>

  <p>If the <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute is in
  the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state, the element is specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a>.</p>

  <div class="impl">

  <p><strong>Constraint validation</strong>: If the <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute is in the <a href="#attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</a> state or
  the <a href="#attr-button-type-button-state" title="attr-button-type-button-state">Button</a> state,
  the element is <a href="constraints.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  <p>When a <code><a href="#the-button-element">button</a></code> element is not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, its <a href="content-models.html#activation-behavior">activation
  behavior</a> element is to run the steps defined in the following
  list for the current state of the element's <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute:</p>

  <dl><dt> <dfn id="attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</dfn> </dt>

   <dd><p>If the element has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, the element
   must <a href="constraints.html#concept-form-submit" title="concept-form-submit">submit</a> the <a href="association-of-controls-and-forms.html#form-owner">form
   owner</a> from the <code><a href="#the-button-element">button</a></code> element.</p></dd>

   <dt> <dfn id="attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</dfn> </dt>

   <dd><p>If the element has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, the element
   must <a href="constraints.html#concept-form-reset" title="concept-form-reset">reset</a> the <a href="association-of-controls-and-forms.html#form-owner">form
   owner</a>.</p></dd>

   <dt> <dfn id="attr-button-type-button-state" title="attr-button-type-button-state">Button</dfn>

   </dt><dd><p>Do nothing.</p></dd>

  </dl></div>

  <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-button-element">button</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. The <code title="attr-fe-disabled"><a href="attributes-common-to-form-controls.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="attributes-common-to-form-controls.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus. The <code title="attr-fs-formaction"><a href="form-submission.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="form-submission.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="form-submission.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="form-submission.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="form-submission.html#attr-fs-formtarget">formtarget</a></code> attributes are
  <a href="form-submission.html#attributes-for-form-submission">attributes for form submission</a>.</p>

  <p class="note">The <code title="attr-fs-formnovalidate"><a href="form-submission.html#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
  be used to make submit buttons that do not trigger the constraint
  validation.</p>

  <p>The <code title="attr-fs-formaction"><a href="form-submission.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="form-submission.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="form-submission.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="form-submission.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="form-submission.html#attr-fs-formtarget">formtarget</a></code> must not be specified
  if the element's <code title="attr-button-type"><a href="#attr-button-type">type</a></code>
  attribute is not in the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state.</p>

  <p>The <dfn id="attr-button-value" title="attr-button-value"><code>value</code></dfn>
  attribute gives the element's value for the purposes of form
  submission. The element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> is the value of the element's
  <code title="attr-button-value"><a href="#attr-button-value">value</a></code> attribute, if there is
  one, or the empty string otherwise.</p>

  <p class="note">A button (and its value) is only included in the
  form submission if the button itself was used to initiate the form
  submission.</p>

  <div class="impl">

  <p>The <dfn id="dom-button-value" title="dom-button-value"><code>value</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-button-type" title="dom-button-type"><code>type</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</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-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-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>

  <div class="example">

   <p>The following button is labeled "Show hint" and pops up a dialog
   box when activated:</p>

   <pre>&lt;button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')"&gt;
 Show hint
&lt;/button&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: links.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.12 Links &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
[...6170 lines suppressed...]

   <pre>&lt;figure <strong>itemscope itemtype="http://n.whatwg.org/work"</strong>&gt;
 &lt;img <strong>itemprop="work"</strong> src="mypond.jpeg"&gt;
 &lt;figcaption&gt;
  &lt;p&gt;&lt;cite <strong>itemprop="title"</strong>&gt;My Pond&lt;/cite&gt;&lt;/p&gt;
  &lt;p&gt;&lt;small&gt;Licensed under the &lt;a <strong>itemprop="license"</strong>
  href="http://creativecommons.org/licenses/by-sa/3.0/us/"&gt;Creative
  Commons Attribution-Share Alike 3.0 United States License&lt;/a&gt;
  and the &lt;a <strong>itemprop="license"</strong>
  href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT
  license&lt;/a&gt;.&lt;/small&gt;
 &lt;/figcaption&gt;
&lt;/figure&gt;</pre>

  </div>




  </body></html>
--- NEW FILE: the-cite-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.6 The cite element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-s-element.html" title="4.6.5 The s element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-q-element.html" title="4.6.7 The q 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-s-element.html">&#8592; 4.6.5 The s element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-q-element.html">4.6.7 The q element &#8594;</a>
  </div>

  <h4 id="the-cite-element"><span class="secno">4.6.6 </span>The <dfn><code>cite</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-cite-element">cite</a></code> element <a href="rendering.html#represents">represents</a> the title
  of a work (e.g.
  a book,
  a paper,
  an essay,
  a poem,
  a score,
  a song,
  a script,
  a film,
  a TV show,
  a game,
  a sculpture,
  a painting,
  a theatre production,
  a play,
  an opera,
  a musical,
  an exhibition,
  a legal case report,
  etc). This can be a work that is being quoted or
  referenced in detail (i.e. a citation), or it can just be a work
  that is mentioned in passing.</p>

  <p>A person's name is not the title of a work &#8212; even if people
  call that person a piece of work &#8212; and the element must
  therefore not be used to mark up people's names. (In some cases, the
  <code><a href="the-b-element.html#the-b-element">b</a></code> element might be appropriate for names; e.g. in a
  gossip article where the names of famous people are keywords
  rendered with a different style to draw attention to them. In other
  cases, if an element is <em>really</em> needed, the
  <code><a href="the-span-element.html#the-span-element">span</a></code> element can be used.)</p>

<!--(some people argue a ship is a work)
  <p>A ship is similarly not a work, and the element must not be used
  to mark up ship names (the <code>i</code> element can be used for
  that purpose).</p>
-->

  <div class="example">

   <p>This next example shows a typical use of the <code><a href="#the-cite-element">cite</a></code>
   element:</p>

   <pre>&lt;p&gt;My favorite book is &lt;cite&gt;The Reality Dysfunction&lt;/cite&gt; by
Peter F. Hamilton. My favorite comic is &lt;cite&gt;Pearls Before
Swine&lt;/cite&gt; by Stephan Pastis. My favorite track is &lt;cite&gt;Jive
Samba&lt;/cite&gt; by the Cannonball Adderley Sextet.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>This is correct usage:</p>

   <pre>&lt;p&gt;According to the Wikipedia article &lt;cite&gt;HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>

   <p>The following, however, is incorrect usage, as the
   <code><a href="#the-cite-element">cite</a></code> element here is containing far more than the
   title of the work:</p>

   <pre class="bad">&lt;!-- do not copy this example, it is an example of bad usage! --&gt;
&lt;p&gt;According to &lt;cite&gt;the Wikipedia article on HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>

  </div>

  <div class="example">

   <p>The <code><a href="#the-cite-element">cite</a></code> element is obviously a key part of any
   citation in a bibliography, but it is only used to mark the
   title:</p>

   <pre>&lt;p&gt;&lt;cite&gt;Universal Declaration of Human Rights&lt;/cite&gt;, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).&lt;/p&gt;</pre>

  </div>

  <p class="note">A <em>citation</em> is not a <em>quote</em> (for
  which the <code><a href="the-q-element.html#the-q-element">q</a></code> element is appropriate).</p>

  <div class="example">

   <p>This is incorrect usage, because <code><a href="#the-cite-element">cite</a></code> is not for
   quotes:</p>

   <pre class="bad">&lt;p&gt;&lt;cite&gt;This is wrong!&lt;/cite&gt;, said Ian.&lt;/p&gt;</pre>

   <p>This is also incorrect usage, because a person is not a
   work:</p>

   <pre class="bad">&lt;p&gt;&lt;q&gt;This is still wrong!&lt;/q&gt;, said &lt;cite&gt;Ian&lt;/cite&gt;.&lt;/p&gt;</pre>

   <p>The correct usage does not use a <code><a href="#the-cite-element">cite</a></code> element:</p>

   <pre>&lt;p&gt;&lt;q&gt;This is correct&lt;/q&gt;, said Ian.&lt;/p&gt;</pre>

   <p>As mentioned above, the <code><a href="the-b-element.html#the-b-element">b</a></code> element might be relevant
   for marking names as being keywords in certain kinds of
   documents:</p>

   <pre>&lt;p&gt;And then &lt;b&gt;Ian&lt;/b&gt; said &lt;q&gt;this might be right, in a
gossip column, maybe!&lt;/q&gt;.&lt;/p&gt;</pre>

  </div>



  </body></html>
--- NEW FILE: the-hgroup-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.4.7 The hgroup element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-aside-element.html" title="4.4.5 The aside element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-header-element.html" title="4.4.8 The header 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-aside-element.html">&#8592; 4.4.5 The aside element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-header-element.html">4.4.8 The header element &#8594;</a>
  </div>

  <h4 id="the-hgroup-element"><span class="secno">4.4.7 </span>The <dfn><code>hgroup</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#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>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 or more <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>, <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code>, <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a></code>, <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a></code>, <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a></code>, and/or <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> elements.</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-hgroup-element">hgroup</a></code> element <a href="rendering.html#represents">represents</a> the
  heading of a section. The element is used to group a set of
  <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>&#8211;<code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> elements when the heading has
  multiple levels, such as subheadings, alternative titles, or
  taglines.</p>

  <p>For the purposes of document summaries, outlines, and the like,
  the text of <code><a href="#the-hgroup-element">hgroup</a></code> elements is defined to be the text
  of the highest <a href="the-aside-element.html#rank" title="rank">ranked</a>
  <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>&#8211;<code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> element descendant of the
  <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are any such elements, and the
  first such element if there are multiple elements with that
  <a href="the-aside-element.html#rank">rank</a>. If there are no such elements, then the text of
  the <code><a href="#the-hgroup-element">hgroup</a></code> element is the empty string.</p>

  <p>Other elements of <a href="content-models.html#heading-content-0">heading content</a> in the
  <code><a href="#the-hgroup-element">hgroup</a></code> element indicate subheadings or subtitles.</p>

  <p>The <a href="the-aside-element.html#rank">rank</a> of an <code><a href="#the-hgroup-element">hgroup</a></code> element is the
  rank of the highest-ranked <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>&#8211;<code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>
  element descendant of the <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are
  any such elements, or otherwise the same as for an <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>
  element (the highest rank).</p>

  <p>The section on <a href="headings-and-sections.html#headings-and-sections">headings and sections</a>
  defines how <code><a href="#the-hgroup-element">hgroup</a></code> elements are assigned to individual
  sections.</p>

  <div class="example">

   <p>Here are some examples of valid headings. In each case, the
   emphasized text represents the text that would be used as the
   heading in an application extracting heading data and ignoring
   subheadings.</p>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
 &lt;h2&gt;Space is not the only void&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>Dr. Strangelove</strong>&lt;/h1&gt;
 &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

  <p>The point of using <code><a href="#the-hgroup-element">hgroup</a></code> in these examples is to
  mask the <code><a href="the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a></code> element (which acts as a secondary title)
  from the <a href="headings-and-sections.html#outline">outline</a> algorithm.</p><!--
  http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
  -->

  </div>


  </body></html>
--- NEW FILE: common-input-element-apis.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.10.7.4 Common input element APIs &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="common-input-element-attributes.html" title="4.10.7.3 Common input element attributes" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-button-element.html" title="4.10.8 The button 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="common-input-element-attributes.html">&#8592; 4.10.7.3 Common input element attributes</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-button-element.html">4.10.8 The button element &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><ol><li><a href="common-input-element-apis.html#common-input-element-apis"><span class="secno">4.10.7.4 </span>Common <code>input</code> element APIs</a></li><li><a href="common-input-element-apis.html#common-event-behaviors"><span class="secno">4.10.7.5 </span>Common event behaviors</a></li></ol></li></ol></li></ol></li></ol></div>

  <h5 id="common-input-element-apis"><span class="secno">4.10.7.4 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element APIs</h5>

  <dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-value"><a href="#dom-input-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>
    of the form control.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if it is
    set to any value other than the empty string when the control is a
    file upload control.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the current <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the form
    control.</p>

    <p>Can be set, to change the <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a>.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-files"><a href="#dom-input-files">files</a></code></dt>

   <dd>

    <p>Returns a <code><a href="infrastructure.html#filelist">FileList</a></code> object listing the <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a> of
    the form control.</p>

    <p>Returns null if the control isn't a file control.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a <code>Date</code> object representing the form
    control's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>, if
    applicable; otherwise, returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if the
    control isn't date- or time-based.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns a number representing the form control's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>, if applicable; otherwise,
    returns NaN.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if the
    control is neither date- or time-based nor numeric.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp</a></code>( [ <var title="">n</var> ] )</dt>
   <dt><var title="">input</var> . <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown</a></code>( [ <var title="">n</var> ] )</dt>

   <dd>

    <p>Changes the form control's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> by the value given in the
    <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute, multiplied by
    <var title="">n</var>. The default value for <var title="">n</var>
    is 1.</p>

    <p>Throws <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception if the control
    is neither date- or time-based nor numeric, if the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute's value is "<code title="">any</code>", if the current <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> could not be parsed, or if
    stepping in the given direction by the given amount would take the
    value out of range.</p>

   </dd>

   <dt><var title="">input</var> . <code title="dom-input-list"><a href="#dom-input-list">list</a></code></dt>

   <dd>

    <p>Returns the <code><a href="the-datalist-element.html#the-datalist-element">datalist</a></code> element indicated by the
    <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-input-value" title="dom-input-value"><code>value</code></dfn> IDL
  attribute allows scripts to manipulate the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of an <code><a href="the-input-element.html#the-input-element">input</a></code>
  element. The attribute is in one of the following modes, which
  define its behavior:</p>

  <dl><dt><dfn id="dom-input-value-value" title="dom-input-value-value">value</dfn>

   </dt><dd>

    <p>On getting, it must return the current <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of the element. On setting,
    it must set the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> to the new value, set the
    element's <a href="the-input-element.html#concept-input-value-dirty-flag" title="concept-input-value-dirty-flag">dirty value
    flag</a> to true, invoke the <a href="the-input-element.html#value-sanitization-algorithm">value sanitization
    algorithm</a>, if the element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state
    defines one, and then, if the element has a text entry cursor
    position, should move the text entry cursor position to the end of
    the text field, unselecting any selected text and resetting the
    selection direction to <i>none</i>.</p>

   </dd>

   <dt><dfn id="dom-input-value-default" title="dom-input-value-default">default</dfn>

   </dt><dd>

    <p>On getting, if the element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, it must return
    that attribute's value; otherwise, it must return the empty
    string. On setting, it must set the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute to the new
    value.</p>

   </dd>

   <dt><dfn id="dom-input-value-default-on" title="dom-input-value-default-on">default/on</dfn>

   </dt><dd>

    <p>On getting, if the element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, it must return
    that attribute's value; otherwise, it must return the string
    "<code title="">on</code>". On setting, it must set the element's
    <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute to the new
    value.</p>

   </dd>

   <dt><dfn id="dom-input-value-filename" title="dom-input-value-filename">filename</dfn>

   </dt><dd id="fakepath-orly">

    <p>On getting, it must return the string "<code title="">C:\fakepath\</code>" followed by the filename of the
    first file in the list of <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>, if
    any, or the empty string if the list is empty. On setting, if the
    new value is the empty string, it must empty the list of <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>;
    otherwise, it must throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code>
    exception.</p>

    <p class="note">This "fakepath" requirement is a sad accident of
    history. See <a href="states-of-the-type-attribute.html#fakepath-srsly">the example in the File
    Upload state section</a> for more information.</p>

   </dd>

  </dl><hr><p>The <dfn id="dom-input-checked" title="dom-input-checked"><code>checked</code></dfn> IDL
  attribute allows scripts to manipulate the <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element. On getting, it must return the current
  <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the element;
  and on setting, it must set the element's <a href="attributes-common-to-form-controls.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> to the new value and
  set the element's <a href="the-input-element.html#concept-input-checked-dirty-flag" title="concept-input-checked-dirty-flag">dirty checkedness
  flag</a> to true.</p>

  <hr><p>The <dfn id="dom-input-files" title="dom-input-files"><code>files</code></dfn> IDL
  attribute allows scripts to access the element's <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>. On
  getting, if the IDL attribute applies, it must return a
  <code><a href="infrastructure.html#filelist">FileList</a></code> object that represents the current <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>. The
  same object must be returned until the list of <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>
  changes. If the IDL attribute does not apply, then it must instead
  return null. <a href="references.html#refsFILEAPI">[FILEAPI]</a></p>

  <hr><p>The <dfn id="dom-input-valueasdate" title="dom-input-valueAsDate"><code>valueAsDate</code></dfn> IDL
  attribute represents the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of the element, interpreted
  as a date.</p>

  <p>On getting, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  return null. Otherwise, run the <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  it, otherwise, return null.</p>

  <p>On setting, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> attribute does not
  apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception; otherwise, if the
  new value is null or a <code>Date</code> object representing the NaN
  time value, then set the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element to the empty string; otherwise, run the <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, as defined for that
  state, on the new value, and set the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of the element to resulting
  string.</p>

  <hr><p>The <dfn id="dom-input-valueasnumber" title="dom-input-valueAsNumber"><code>valueAsNumber</code></dfn> IDL
  attribute represents the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element, interpreted as a number.</p>

  <p>On getting, if the <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  return a Not-a-Number (NaN) value. Otherwise, if the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAs<em>Date</em></a></code>
  attribute applies, run the <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a> defined for that state;
  if the algorithm returned a <code>Date</code> object, then return
  the <i>time value</i> of the object (the number of milliseconds from
  midnight UTC the morning of 1970-01-01 to the time represented by
  the <code>Date</code> object), otherwise, return a Not-a-Number
  (NaN) value. Otherwise, run the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a> defined for that state; if the algorithm
  returned a number, then return it, otherwise, return a Not-a-Number
  (NaN) value.</p>

  <p>On setting, if the <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> attribute does
  not apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
  throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception. Otherwise, if
  the <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAs<em>Date</em></a></code>
  attribute applies, run the <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a> defined for that state,
  passing it a <code>Date</code> object whose <i>time value</i> is the
  new value, and set the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element to resulting string. Otherwise, run the <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, as defined for that state, on the new
  value, and set the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of
  the element to resulting string.</p>

  <hr><p>The <dfn id="dom-input-stepdown" title="dom-input-stepDown"><code>stepDown(<var title="">n</var>)</code></dfn> and <dfn id="dom-input-stepup" title="dom-input-stepUp"><code>stepUp(<var title="">n</var>)</code></dfn> methods, when invoked, must run the
  following algorithm:</p>

  <ol><li><p>If the <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods do not
   apply, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's current state, then
   throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception, and abort these
   steps.</p></li>

   <li><p>If the element has no <a href="common-input-element-attributes.html#concept-input-step" title="concept-input-step">allowed value step</a>, then throw an
   <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception, and abort these
   steps.</p></li>

   <li><p>If applying the <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
   string to a number</a> to the string given by the element's
   <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> results in an error,
   then throw an <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception, and abort
   these steps; otherwise, let <var title="">value</var> be the result
   of that algorithm.</p></li>

   <li><p>Let <var title="">n</var> be the argument, or 1 if the
   argument was omitted.</p></li>

   <li><p>Let <var title="">delta</var> be the <a href="common-input-element-attributes.html#concept-input-step" title="concept-input-step">allowed value step</a> multiplied by
   <var title="">n</var>.</p></li>

   <li><p>If the method invoked was the <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> method, negate <var title="">delta</var>.</p></li>

   <li><p>Let <var title="">value</var> be the result of adding <var title="">delta</var> to <var title="">value</var>.</p></li>
   <li><p>If the element has a <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, and the <var title="">value</var> is less than that <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, then throw a
   <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception.</p></li>

   <li><p>If the element has a <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>, and the <var title="">value</var> is greater than that <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>, then throw a
   <code><a href="infrastructure.html#invalidstateerror">InvalidStateError</a></code> exception.</p></li>

   <li><p>Let <var title="">value as string</var> be the result of
   running the <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
   number to a string</a>, as defined for the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute's
   current state, on <var title="">value</var>.</p></li>

   <li><p>Set the <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> of the
   element to <var title="">value as string</var>.</p></li>

  </ol><hr><p>The <dfn id="dom-input-list" title="dom-input-list"><code>list</code></dfn> IDL
  attribute must return the current <a href="common-input-element-attributes.html#concept-input-list" title="concept-input-list">suggestions source element</a>, if
  any, or null otherwise.</p>

  </div>
<!--TOPIC:HTML-->


  <div class="impl">

  <h5 id="common-event-behaviors"><span class="secno">4.10.7.5 </span>Common event behaviors</h5>

  <p>When the <dfn id="event-input-input" title="event-input-input"><code>input</code></dfn>
  event applies, any time the user causes the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> to change, the user agent must
  <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-input">input</code> at the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element. User agents may wait for a suitable
  break in the user's interaction before queuing the task; for
  example, a user agent could wait for the user to have not hit a key
  for 100ms, so as to only fire the event when the user pauses,
  instead of continuously for each keystroke.</p> <!-- same text is
  present in the <textarea> section -->

  <p class="example">Examples of a user changing the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> would include the user typing
  into a text field, pasting a new value into the field, or undoing an
  edit in that field. Some user interactions do not cause changes to
  the value, e.g. hitting the "delete" key in an empty text field, or
  replacing some text in the field with text from the clipboard that
  happens to be exactly the same text.</p>

  <p>When the <dfn id="event-input-change" title="event-input-change"><code>change</code></dfn> event applies,
  if the element does not have an <a href="content-models.html#activation-behavior">activation behavior</a>
  defined but uses a user interface that involves an explicit commit
  action, then any time the user commits a change to the element's
  <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> or list of <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>, the
  user agent must <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-change">change</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
  element.</p>

  <p class="example">An example of a user interface with a commit
  action would be a <a href="states-of-the-type-attribute.html#file-upload-state-(type=file)" title="attr-input-type-file">File
  Upload</a> control that consists of a single button that brings
  up a file selection dialog: when the dialog is closed, if that the
  <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">file selection</a>
  changed as a result, then the user has committed a new <a href="states-of-the-type-attribute.html#concept-input-type-file-selected" title="concept-input-type-file-selected">file selection</a>.</p>

  <p class="example">Another example of a user interface with a commit
  action would be a <a href="states-of-the-type-attribute.html#date-state-(type=date)" title="attr-input-type-date">Date</a>
  control that allows both text-based user input and user selection
  from a drop-down calendar: while text input might not have an
  explicit commit step, selecting a date from the drop down calendar
  and then dismissing the drop down would be a commit action.</p>

  <p>When the user agent changes the element's <a href="attributes-common-to-form-controls.html#concept-fe-value" title="concept-fe-value">value</a> on behalf of the user (e.g. as
  part of a form prefilling feature), the user agent must follow these
  steps:</p>

  <ol><li>If the <code title="event-input-input"><a href="#event-input-input">input</a></code> event
   applies, <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-input">input</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element.</li>

   <li>If the <code title="event-input-change"><a href="#event-input-change">change</a></code> event
   applies, <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-change">change</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element.</li>

  </ol><p class="note">In addition, when the <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies, <code title="event-change">change</code> events can also be fired as part
  of the element's <a href="content-models.html#activation-behavior">activation behavior</a> and as part of the
  <a href="editing.html#unfocusing-steps">unfocusing steps</a>.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#user-interaction-task-source">user interaction task
  source</a>.</p>

  </div>



  </body></html>
--- NEW FILE: the-tr-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.9.8 The tr element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-tfoot-element.html" title="4.9.7 The tfoot element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-td-element.html" title="4.9.9 The td 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-tfoot-element.html">&#8592; 4.9.7 The tfoot element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-td-element.html">4.9.9 The td element &#8594;</a>
  </div>

  <h4 id="the-tr-element"><span class="secno">4.9.8 </span>The <dfn><code>tr</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-thead-element.html#the-thead-element">thead</a></code> element.</dd>
   <dd>As a child of a <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code> element.</dd>
   <dd>As a child of a <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code> element.</dd>
   <dd>As a child of a <code><a href="the-table-element.html#the-table-element">table</a></code> element, after any
   <code><a href="the-caption-element.html#the-caption-element">caption</a></code>, <code><a href="the-colgroup-element.html#the-colgroup-element">colgroup</a></code>, and <code><a href="the-thead-element.html#the-thead-element">thead</a></code>
   elements, but only if there are no <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code> elements that
   are children of the <code><a href="the-table-element.html#the-table-element">table</a></code> element.</dd>
   <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
   <dd>Zero or more <code><a href="the-td-element.html#the-td-element">td</a></code> or <code><a href="the-th-element.html#the-th-element">th</a></code> elements</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="htmltablerowelement">HTMLTableRowElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute long <a href="#dom-tr-rowindex" title="dom-tr-rowIndex">rowIndex</a>;
  readonly attribute long <a href="#dom-tr-sectionrowindex" title="dom-tr-sectionRowIndex">sectionRowIndex</a>;
  readonly attribute <a href="infrastructure.html#htmlcollection">HTMLCollection</a> <a href="#dom-tr-cells" title="dom-tr-cells">cells</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-tr-insertcell" title="dom-tr-insertCell">insertCell</a>(optional long index);
  void <a href="#dom-tr-deletecell" title="dom-tr-deleteCell">deleteCell</a>(long index);
};</pre>
   </dd>
  </dl><!--TOPIC:HTML--><p>The <code><a href="#the-tr-element">tr</a></code> element <a href="rendering.html#represents">represents</a> a <a href="attributes-common-to-td-and-th-elements.html#concept-row" title="concept-row">row</a> of <a href="attributes-common-to-td-and-th-elements.html#concept-cell" title="concept-cell">cells</a> in a <a href="attributes-common-to-td-and-th-elements.html#concept-table" title="concept-table">table</a>.</p>

  <div class="impl">

  <p>The <code><a href="#the-tr-element">tr</a></code> element takes part in the <a href="attributes-common-to-td-and-th-elements.html#table-model">table
  model</a>.</p>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro"><dt><var title="">tr</var> . <code title="dom-tr-rowIndex"><a href="#dom-tr-rowindex">rowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table's <code title="dom-table-rows"><a href="the-table-element.html#dom-table-rows">rows</a></code> list.</p>

    <p>Returns &#8722;1 if the element isn't in a table.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-sectionRowIndex"><a href="#dom-tr-sectionrowindex">sectionRowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table section's <code title="dom-tbody-rows"><a href="the-tbody-element.html#dom-tbody-rows">rows</a></code> list.</p>

    <p>Returns &#8722;1 if the element isn't in a table section.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code></dt>
   <dd>

    <p>Returns an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="the-td-element.html#the-td-element">td</a></code> and <code><a href="the-th-element.html#the-th-element">th</a></code> elements of the row.</p>

   </dd>

   <dt><var title="">cell</var> = <var title="">tr</var> . <code title="dom-tr-insertCell"><a href="#dom-tr-insertcell">insertCell</a></code>( [ <var title="">index</var> ] )</dt>

   <dd>

    <p>Creates a <code><a href="the-td-element.html#the-td-element">td</a></code> element, inserts it into the table
    row at the position given by the argument, and returns the
    <code><a href="the-td-element.html#the-td-element">td</a></code>.</p>

    <p>The position is relative to the cells in the row. The
    index &#8722;1, which is the default if the argument is omitted,
    is equivalent to inserting at the end of the row.</p>

    <p>If the given position is less than &#8722;1 or greater than
    the number of cells, throws an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code>
    exception.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-deleteCell"><a href="#dom-tr-deletecell">deleteCell</a></code>(<var title="">index</var>)</dt>
   <dd>

    <p>Removes the <code><a href="the-td-element.html#the-td-element">td</a></code> or <code><a href="the-th-element.html#the-th-element">th</a></code> element with the
    given position in the row.</p>

    <p>The position is relative to the cells in the row. The index
    &#8722;1 is equivalent to deleting the last cell of the row.</p>

    <p>If the given position is less than &#8722;1 or greater than
    the index of the last cell, or if there are no cells, throws an
    <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code> exception.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-tr-rowindex" title="dom-tr-rowIndex"><code>rowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href="the-table-element.html#the-table-element">table</a></code>
  element, or a parent <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code>, <code><a href="the-thead-element.html#the-thead-element">thead</a></code>, or
  <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code> element and a <em>grandparent</em>
  <code><a href="the-table-element.html#the-table-element">table</a></code> element, return the index of the <code><a href="#the-tr-element">tr</a></code>
  element in that <code><a href="the-table-element.html#the-table-element">table</a></code> element's <code title="dom-table-rows"><a href="the-table-element.html#dom-table-rows">rows</a></code> collection. If there is no such
  <code><a href="the-table-element.html#the-table-element">table</a></code> element, then the attribute must return
  &#8722;1.</p>

  <p>The <dfn id="dom-tr-sectionrowindex" title="dom-tr-sectionRowIndex"><code>sectionRowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href="the-table-element.html#the-table-element">table</a></code>,
  <code><a href="the-tbody-element.html#the-tbody-element">tbody</a></code>, <code><a href="the-thead-element.html#the-thead-element">thead</a></code>, or <code><a href="the-tfoot-element.html#the-tfoot-element">tfoot</a></code>
  element, return the index of the <code><a href="#the-tr-element">tr</a></code> element in the
  parent element's <code title="">rows</code> collection (for tables,
  that's the <code title="dom-table-rows"><a href="the-table-element.html#dom-table-rows">HTMLTableElement.rows</a></code>
  collection; for table sections, that's the <code title="dom-tbody-rows"><a href="the-tbody-element.html#dom-tbody-rows">HTMLTableRowElement.rows</a></code>
  collection). If there is no such parent element, then the attribute
  must return &#8722;1.</p>

  <p>The <dfn id="dom-tr-cells" title="dom-tr-cells"><code>cells</code></dfn> attribute
  must return an <code><a href="infrastructure.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="#the-tr-element">tr</a></code> element, whose filter matches only <code><a href="the-td-element.html#the-td-element">td</a></code>
  and <code><a href="the-th-element.html#the-th-element">th</a></code> elements that are children of the
  <code><a href="#the-tr-element">tr</a></code> element.</p>

  <p>The <dfn id="dom-tr-insertcell" title="dom-tr-insertCell"><code>insertCell(<var title="">index</var>)</code></dfn> method must act as follows:</p>

  <p>If <var title="">index</var> is less than &#8722;1 or greater than the
  number of elements in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code>
  collection, the method must throw an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &#8722;1, or
  equal to the number of items in <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, the method must create
  a <code><a href="the-td-element.html#the-td-element">td</a></code> element, append it to the <code><a href="#the-tr-element">tr</a></code> element,
  and return the newly created <code><a href="the-td-element.html#the-td-element">td</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href="the-td-element.html#the-td-element">td</a></code> element,
  insert it as a child of the <code><a href="#the-tr-element">tr</a></code> element, immediately
  before the <var title="">index</var>th <code><a href="the-td-element.html#the-td-element">td</a></code> or
  <code><a href="the-th-element.html#the-th-element">th</a></code> element in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, and finally must
  return the newly created <code><a href="the-td-element.html#the-td-element">td</a></code> element.</p>

  <p>The <dfn id="dom-tr-deletecell" title="dom-tr-deleteCell"><code>deleteCell(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, the method must
  instead throw an <code><a href="infrastructure.html#indexsizeerror">IndexSizeError</a></code> exception.</p>

  </div>
<!--TOPIC:HTML-->


  </body></html>
--- NEW FILE: timers.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>6.3 Timers &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="webappapis.html" title="6 Web application APIs" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="user-prompts.html" title="6.4 User prompts" 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="webappapis.html">&#8592; 6 Web application APIs</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="user-prompts.html">6.4 User prompts &#8594;</a>
  </div>

  <h3 id="timers"><span class="secno">6.3 </span>Timers</h3>

  <p>The <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code>
  and <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code>
  methods allow authors to schedule timer-based callbacks.</p>

  <pre class="idl">[NoInterfaceObject]
interface <dfn id="windowtimers">WindowTimers</dfn> {
  long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>(<a href="#arbitrarycallback">ArbitraryCallback</a> handler, optional long timeout, any... args);
  long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>([AllowAny] DOMString handler, optional long timeout, any... args);
  void <a href="#dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout">clearTimeout</a>(long handle);
  long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>(<a href="#arbitrarycallback">ArbitraryCallback</a> handler, optional long timeout, any... args);
  long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>([AllowAny] DOMString handler, optional long timeout, any... args);
  void <a href="#dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval">clearInterval</a>(long handle);
};
<a href="browsers.html#window">Window</a> implements <a href="#windowtimers">WindowTimers</a>;

[TreatNonCallableAsNull] callback <dfn id="arbitrarycallback">ArbitraryCallback</dfn> = any (any... args);</pre>

  <!-- Demonstrating the need for wrapping of the timeout argument value treated as long rather than clamping or treating as double:
          http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1228
       Demonstrating the need for the timeout argument to be signed rather than unsigned:
          http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1229
  -->

  <dl class="domintro"><dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var>... ] ] )</dt>

   <dd>

    <p>Schedules a timeout to run <var title="">handler</var> after
    <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>

   <dd>

    <p>Schedules a timeout to compile and run <var title="">code</var>
    after <var title="">timeout</var> milliseconds.</p>

   </dd>

   <dt><var title="">window</var> . <code title="dom-windowtimers-clearTimeout"><a href="#dom-windowtimers-cleartimeout">clearTimeout</a></code>( <var title="">handle</var> )</dt>

   <dd>

    <p>Cancels the timeout set with <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> identified by <var title="">handle</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var>... ] ] )</dt>

   <dd>

    <p>Schedules a timeout to run <var title="">handler</var> every
    <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>

   </dd>

   <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>

   <dd>

    <p>Schedules a timeout to compile and run <var title="">code</var>
    every <var title="">timeout</var> milliseconds.</p>

   </dd>

   <dt><var title="">window</var> . <code title="dom-windowtimers-clearInterval"><a href="#dom-windowtimers-clearinterval">clearInterval</a></code>( <var title="">handle</var> )</dt>

   <dd>

    <p>Cancels the timeout set with <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> identified by <var title="">handle</var>.</p>

   </dd>

  </dl><p class="note">This API does not guarantee that timers will run
  exactly on schedule. Delays due to CPU load, other tasks, etc, are
  to be expected.</p>

  <div class="impl">

  <p class="note">The <code><a href="#windowtimers">WindowTimers</a></code> interface adds to the
  <code><a href="browsers.html#window">Window</a></code> interface and the <code>WorkerUtils</code>
  interface (part of Web Workers).
    <a href="references.html#refsWEBWORKERS">[WEBWORKERS]</a>
    </p>

  <p>Each object that implements the <code><a href="#windowtimers">WindowTimers</a></code>
  interface has a <dfn id="list-of-active-timers">list of active timers</dfn>. Each entry in this
  lists is identified by a number, which must be unique within the
  list for the lifetime of the object that implements the
  <code><a href="#windowtimers">WindowTimers</a></code> interface.</p>

  <hr><p>The <dfn id="dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout"><code>setTimeout()</code></dfn>
  method must run the following steps:

  </p><ol><li><p>Let <var title="">handle</var> be a user-agent-defined
   integer that is greater than zero that will identify the timeout to
   be set by this call in the <a href="#list-of-active-timers">list of active
   timers</a>.</p></li>

   <li><p>Add an entry to the <a href="#list-of-active-timers">list of active timers</a> for
   <var title="">handle</var>.</p></li>

   <li><p><a href="#get-the-timed-task">Get the timed task</a> <var title="">handle</var>
   in the <a href="#list-of-active-timers">list of active timers</a>, and let <var title="">task</var> be the result.</p></li>

   <li><p>Let <var title="">timeout</var> be the second argument to
   the method, or zero if the argument was omitted.</p></li>

   <li><p>If the currently running <a href="webappapis.html#concept-task" title="concept-task">task</a> is a task that was created by the
   <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code>
   method, and <var title="">timeout</var> is less than 4, then
   increase <var title="">timeout</var> to 4.</p></li>

   <li><p>Return <var title="">handle</var>, and then continue running
   this algorithm asynchronously.</p></li>

   <li>

    <p>If the <a href="#method-context">method context</a> is a <code><a href="browsers.html#window">Window</a></code>
    object, wait until the <code><a href="dom.html#document">Document</a></code> associated with the
    <a href="#method-context">method context</a> has been <a href="browsers.html#fully-active">fully active</a> for
    a further <var title="">timeout</var> milliseconds (not
    necessarily consecutively).</p>

    <p>Otherwise, if the <a href="#method-context">method context</a> is a
    <code>WorkerUtils</code> object, wait until <var title="">timeout</var> milliseconds have passed with the worker
    not suspended (not necessarily consecutively).</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href="#windowtimers">WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li>

    <p>Wait until any invocations of this algorithm that had the same
    <a href="#method-context">method context</a>, that started before this one, and
    whose <var title="">timeout</var> is equal to or less than this
    one's, have completed.</p>

    <p class="note">Argument conversion as defined by Web IDL (for
    example, invoking <code title="">toString()</code> methods on
    objects passed as the first argument) happens in the algorithms
    defined in Web IDL, before this algorithm is invoked.</p>

    <div class="example">

     <p>So for example, the following rather silly code will result in
     the log containing "<code title="">ONE&#160;TWO&#160;</code>":</p>

     <pre>var log = '';
function logger(s) { log += s + ' '; }

setTimeout({ toString: function () {
  setTimeout("logger('ONE')", 100);
  return "logger('TWO')";
} }, 100);</pre>

    </div>

   </li>

   <li>

    <p>Optionally, wait a further user-agent defined length of
    time.</p>

    <p class="note">This is intended to allow user agents to pad
    timeouts as needed to optimise the power usage of the device. For
    example, some processors have a low-power mode where the
    granularity of timers is reduced; on such platforms, user agents
    can slow timers down to fit this schedule instead of requiring the
    processor to use the more accurate mode with its associated higher
    power usage.</p>

   </li>

   <li>

    <p><a href="webappapis.html#queue-a-task" title="queue a task">Queue</a> the <var title="">task</var> <a href="webappapis.html#concept-task" title="concept-task">task</a>.</p>

    <p class="note">Once the task has been processed, it is safe to
    remove the entry for <var title="">handle</var> from the
    <a href="#list-of-active-timers">list of active timers</a> (there is no way for the
    entry's existence to be detected past this point, so it does not
    techncially matter one way or the other).</p>

   </li>

  </ol><hr><p>The <dfn id="dom-windowtimers-setinterval" title="dom-windowtimers-setInterval"><code>setInterval()</code></dfn>
  method must run the following steps:

  </p><ol><li><p>Let <var title="">handle</var> be a user-agent-defined
   integer that is greater than zero that will identify the timeout to
   be set by this call in the <a href="#list-of-active-timers">list of active
   timers</a>.</p></li>

   <li><p>Add an entry to the <a href="#list-of-active-timers">list of active timers</a> for
   <var title="">handle</var>.</p></li>

   <li><p><a href="#get-the-timed-task">Get the timed task</a> <var title="">handle</var>
   in the <a href="#list-of-active-timers">list of active timers</a>, and let <var title="">task</var> be the result.</p></li>

   <li><p>Let <var title="">timeout</var> be the second argument to
   the method, or zero if the argument was omitted.</p></li>

   <li><p>If <var title="">timeout</var> is less than 4, then
   increase <var title="">timeout</var> to 4.</p></li> <!-- (but see
   note below about IE) -->

   <li><p>Return <var title="">handle</var>, and then continue running
   this algorithm asynchronously.</p></li>

   <!-- Note: IE doesn't actually run intervals with duration zero, it
   aborts roughly here in the algorithm for them. -->

   <li>

    <p><i title="">Wait</i>: If the <a href="#method-context">method context</a> is a
    <code><a href="browsers.html#window">Window</a></code> object, wait until the <code><a href="dom.html#document">Document</a></code>
    associated with the <a href="#method-context">method context</a> has been <a href="browsers.html#fully-active">fully
    active</a> for a further <var title="">interval</var>
    milliseconds (not necessarily consecutively).</p>

    <p>Otherwise, if the <a href="#method-context">method context</a> is a
    <code>WorkerUtils</code> object, wait until <var title="">interval</var> milliseconds have passed with the worker
    not suspended (not necessarily consecutively).</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href="#windowtimers">WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li>

    <p>Optionally, wait a further user-agent defined length of
    time.</p>

    <p class="note">This is intended to allow user agents to pad
    timeouts as needed to optimise the power usage of the device. For
    example, some processors have a low-power mode where the
    granularity of timers is reduced; on such platforms, user agents
    can slow timers down to fit this schedule instead of requiring the
    processor to use the more accurate mode with its associated higher
    power usage.</p>

   </li>

   <li><p><a href="webappapis.html#queue-a-task" title="queue a task">Queue</a> the <var title="">task</var> <a href="webappapis.html#concept-task" title="concept-task">task</a>.</p></li>

   <li><p>Return to the step labeled <i>wait</i>.</p></li>

  </ol><hr><p>The <dfn id="dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout"><code>clearTimeout()</code></dfn>
  and <dfn id="dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval"><code>clearInterval()</code></dfn>
  methods must clear the entry identified as <var title="">handle</var> from the <a href="#list-of-active-timers">list of active timers</a> of
  the <code><a href="#windowtimers">WindowTimers</a></code> object on which the method was
  invoked, where <var title="">handle</var> is the argument passed to
  the method, if any. (If <var title="">handle</var> does not identify
  an entry in the <a href="#list-of-active-timers">list of active timers</a> of the
  <code><a href="#windowtimers">WindowTimers</a></code> object on which the method was invoked,
  the method does nothing.)</p>

  <hr><p>The <dfn id="method-context">method context</dfn>, when referenced by the algorithms
  in this section, is the object on which the method for which the
  algorithm is running is implemented (a <code><a href="browsers.html#window">Window</a></code> or
  <code>WorkerUtils</code> object).</p>

  <p>When the above methods are invoked and try to <dfn id="get-the-timed-task">get the timed
  task</dfn> <var title="">handle</var> in list <var title="">list</var>,
  they must run the following steps:</p>

  <ol><li>

    <p>If the first argument to the invoked method is an
    <code><a href="#arbitrarycallback">ArbitraryCallback</a></code>, then return a <a href="webappapis.html#concept-task" title="concept-task">task</a> that checks if the entry for <var title="">handle</var> in <var title="">list</var> has been
    cleared, and if it has not, calls the
    <code><a href="#arbitrarycallback">ArbitraryCallback</a></code> with as its arguments the third and
    subsequent arguments to the invoked method (if any) and with an
    undefined <var title="">thisArg</var>, and abort these steps. <a href="references.html#refsECMA262">[ECMA262]</a></p>

    <p class="note">Setting <var title="">thisArg</var> to undefined
    means that the function code will be executed with the <code title="">this</code> keyword bound to the <code><a href="browsers.html#windowproxy">WindowProxy</a></code>
    or the <code>WorkerGlobalScope</code> object, as if the code was
    running in the global scope.</p>

    <p>Otherwise, continue with the remaining steps.</p>

   </li>

   <li><p>Let <var title="">script source</var> be the first argument
   to the method.</p></li>

   <li><p>Let <var title="">script language</var> be
   JavaScript.</p></li>

   <li>

    <p>If the <a href="#method-context">method context</a> is a <code><a href="browsers.html#window">Window</a></code>
    object, let <var title="">global object</var> be the <a href="#method-context">method
    context</a>, let <var title="">browsing context</var> be the
    <a href="browsers.html#browsing-context">browsing context</a> with which <var title="">global
    object</var> is associated, let <var title="">character
    encoding</var> be the <a href="infrastructure.html#document's-character-encoding" title="document's character
    encoding">character encoding</a> of the <code><a href="dom.html#document">Document</a></code>
    associated with <var title="">global object</var> (<a href="webappapis.html#sce-not-copy">this is a reference, not a copy</a>), and let
    <var title="">base URL</var> be the <a href="urls.html#document-base-url" title="document base
    URL">base URL</a> of the <code><a href="dom.html#document">Document</a></code> associated with
    <var title="">global object</var> (<a href="webappapis.html#sbu-not-copy">this is
    a reference, not a copy</a>).</p>

    <p>Otherwise, if the <a href="#method-context">method context</a> is a
    <code>WorkerUtils</code> object, let <var title="">global
    object</var>, <var title="">browsing context</var>, <var title="">document</var>, <var title="">character encoding</var>,
    and <var title="">base URL</var> be the <a href="webappapis.html#script's-global-object">script's global
    object</a>, <a href="webappapis.html#script's-browsing-context">script's browsing context</a>,
    <a href="webappapis.html#script's-document">script's document</a>, <a href="webappapis.html#script's-url-character-encoding">script's URL character
    encoding</a>, and <a href="webappapis.html#script's-base-url">script's base URL</a> (respectively)
    of the <a href="webappapis.html#concept-script" title="concept-script">script</a> that the
    <span>run a worker</span> algorithm created when it created the
    <a href="#method-context">method context</a>.</p>

    <p>Otherwise, act as described in the specification that defines
    that the <code><a href="#windowtimers">WindowTimers</a></code> interface is implemented by
    some other object.</p>

   </li>

   <li><p>Return a <a href="webappapis.html#concept-task" title="concept-task">task</a> that checks
   if the entry for <var title="">handle</var> in <var title="">list</var> has been cleared, and if it has not, <a href="webappapis.html#create-a-script" title="create a script">creates a script</a> using <var title="">script source</var> as the script source, the
   <a href="urls.html#url">URL</a> where <var title="">script source</var> can be
   found, <var title="">scripting language</var> as the scripting
   language, <var title="">global object</var> as the global object,
   <var title="">browsing context</var> as the browsing context, <var title="">document</var> as the document, <var title="">character
   encoding</var> as the URL character encoding, and <var title="">base URL</var> as the base URL.</p></li>

  </ol><hr><p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <dfn id="timer-task-source">timer task
  source</dfn>.</p>

  </div>



  </body></html>
--- NEW FILE: namespaces.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>2.9 Namespaces &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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="common-dom-interfaces.html" title="2.8 Common DOM interfaces" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" 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="common-dom-interfaces.html">&#8592; 2.8 Common DOM interfaces</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="dom.html">3 Semantics, structure, and APIs of HTML documents &#8594;</a>
  </div>

  <h3 id="namespaces"><span class="secno">2.9 </span>Namespaces</h3>

  <p>The <dfn id="html-namespace-0">HTML namespace</dfn> is: <code>http://www.w3.org/1999/xhtml</code></p>

  <p>The <dfn id="mathml-namespace">MathML namespace</dfn> is: <code>http://www.w3.org/1998/Math/MathML</code></p>

  <p>The <dfn id="svg-namespace">SVG namespace</dfn> is: <code>http://www.w3.org/2000/svg</code></p>

  <p>The <dfn id="xlink-namespace">XLink namespace</dfn> is: <code>http://www.w3.org/1999/xlink</code></p>

  <p>The <dfn id="xml-namespace">XML namespace</dfn> is: <code>http://www.w3.org/XML/1998/namespace</code></p>

  <p>The <dfn id="xmlns-namespace">XMLNS namespace</dfn> is: <code>http://www.w3.org/2000/xmlns/</code></p>

  <hr><p>Data mining tools and other user agents that perform operations
  on content without running scripts, evaluating CSS or XPath
  expressions, or otherwise exposing the resulting DOM to arbitrary
  content, may "support namespaces" by just asserting that their DOM
  node analogues are in certain namespaces, without actually exposing
  the above strings.</p>

  <hr><p class="note">In <a href="syntax.html#syntax">the HTML syntax</a>, namespace prefixes
  and namespace declarations do not have the same effect as in XML.
  For instance, the colon has no special meaning in HTML element
  names.</p>


<!--TOPIC:DOM APIs-->
  </body></html>
--- NEW FILE: the-rt-element.html ---
<!DOCTYPE html>
<html lang="en-US-x-Hixie"><head><title>4.6.21 The rt element &#8212; HTML5</title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   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-ruby-element.html" title="4.6.20 The ruby element" rel="prev">
  <link href="Overview.html#contents" title="Table of contents" rel="contents">
  <link href="the-rp-element.html" title="4.6.22 The rp 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-ruby-element.html">&#8592; 4.6.20 The ruby element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-rp-element.html">4.6.22 The rp element &#8594;</a>
  </div>

  <h4 id="the-rt-element"><span class="secno">4.6.21 </span>The <dfn><code>rt</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.</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-rt-element">rt</a></code> element marks the ruby text component of a
  ruby annotation.</p>

  <p>An <code><a href="#the-rt-element">rt</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> an
  annotation (given by its children) for the zero or more nodes of
  phrasing content that immediately precedes it in the
  <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element, ignoring <code><a href="the-rp-element.html#the-rp-element">rp</a></code> elements.</p>

  <div class="impl">

  <p>An <code><a href="#the-rt-element">rt</a></code> element that is not a child of a
  <code><a href="the-ruby-element.html#the-ruby-element">ruby</a></code> element represents the same thing as its
  children.</p>

  </div>


  </body></html>

Received on Friday, 17 August 2012 14:38:06 UTC