html5/spec-author-view/commands.html - view

File: [Public] / html5 / spec-author-view / commands.html
Revision 1.615: download - view: text, annotated - select for diffs
Thu Oct 11 14:49:17 2012 UTC (12 years, 11 months ago) by mike
Branches: MAIN
CVS tags: HEAD

updated

<!doctype html> <html lang="en-US-x-Hixie"><meta content="HTML Tidy for HTML5 (experimental) for Linux/x86 http://github.com/w3c/tidy-html5/tree/c63cc39" name="generator"><meta charset="utf-8"><title>4.11.5 Commands — HTML5</title><link href="style.css" rel="stylesheet"><style type="text/css"> /**/ /**/ .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } /**/ /**/ </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> /**/ /**/ pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't */ .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; } .stability { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto 0 auto; width: 50%; background: maroon; color: yellow; -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; -moz-box-shadow: 0 0 1em #500; -webkit-box-shadow: 0 0 1em #500; box-shadow: 0 0 1em red; padding: 0.5em 1em; text-align: center; } .stability strong { display: block; } .stability input { -moz-appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black; position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center; } .stability input:hover { color: white; text-shadow: 0 0 2px black; } .stability input:active { padding: 0.3em 0.45em 0.2em 0.55em; } .stability :link, .stability :visited, .stability :link:hover, .stability :visited:hover { background: transparent; color: white; } /**/ /**/ </style><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><meta content="noindex" name="robots"><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-menu-element.html" rel="prev" title="4.11.4 The menu element"> <link href="Overview.html#contents" rel="contents" title="Table of contents"> <link href="links.html" rel="next" title="4.12 Links"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <div aria-haspopup="true" id="jumpIndexA-button" role="button" tabindex="0">jump <div id="jumpIndexA"> <ul><li><a class="noindex" href="the-a-element.html#the-a-element">a</a><a class="noindex" href="the-abbr-element.html#the-abbr-element">abbr</a><a class="noindex" href="the-address-element.html#the-address-element">address</a><a class="noindex" href="the-area-element.html#the-area-element">area</a><a class="noindex" href="the-article-element.html#the-article-element">article</a><a class="noindex" href="the-aside-element.html#the-aside-element">aside</a><a class="noindex" href="the-audio-element.html#the-audio-element">audio</a></li> </ul><ul><li><a class="noindex" href="the-b-element.html#the-b-element">b</a><a class="noindex" href="the-base-element.html#the-base-element">base</a><a class="noindex" href="the-bdi-element.html#the-bdi-element">bdi</a><a class="noindex" href="the-bdo-element.html#the-bdo-element">bdo</a><a class="noindex" href="the-blockquote-element.html#the-blockquote-element">blockquote</a><a class="noindex" href="the-body-element.html#the-body-element">body</a><a class="noindex" href="the-br-element.html#the-br-element">br</a><a class="noindex" href="the-button-element.html#the-button-element">button</a></li> </ul><ul><li><a class="noindex" href="the-canvas-element.html#the-canvas-element">canvas</a><a class="noindex" href="the-caption-element.html#the-caption-element">caption</a><a class="noindex" href="the-cite-element.html#the-cite-element">cite</a><a class="noindex" href="the-code-element.html#the-code-element">code</a><a class="noindex" href="the-col-element.html#the-col-element">col</a><a class="noindex" href="the-colgroup-element.html#the-colgroup-element">colgroup</a><a class="noindex" href="the-command-element.html#the-command-element">command</a></li> </ul><ul><li><a class="noindex" href="the-datalist-element.html#the-datalist-element">datalist</a><a class="noindex" href="the-dd-element.html#the-dd-element">dd</a><a class="noindex" href="the-del-element.html#the-del-element">del</a><a class="noindex" href="the-details-element.html#the-details-element">details</a><a class="noindex" href="the-dfn-element.html#the-dfn-element">dfn</a><a class="noindex" href="the-div-element.html#the-div-element">div</a><a class="noindex" href="the-dl-element.html#the-dl-element">dl</a><a class="noindex" href="the-dt-element.html#the-dt-element">dt</a></li> </ul><ul><li><a class="noindex" href="the-em-element.html#the-em-element">em</a><a class="noindex" href="the-embed-element.html#the-embed-element">embed</a><a class="noindex" href="the-fieldset-element.html#the-fieldset-element">fieldset</a><a class="noindex" href="the-figcaption-element.html#the-figcaption-element">figcaption</a><a class="noindex" href="the-figure-element.html#the-figure-element">figure</a><a class="noindex" href="the-footer-element.html#the-footer-element">footer</a><a class="noindex" href="the-form-element.html#the-form-element">form</a></li> </ul><ul><li><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a><a class="noindex" href="the-head-element.html#the-head-element">head</a><a class="noindex" href="the-header-element.html#the-header-element">header</a><a class="noindex" href="the-hgroup-element.html#the-hgroup-element">hgroup</a><a class="noindex" href="the-hr-element.html#the-hr-element">hr</a><a class="noindex" href="the-html-element.html#the-html-element">html</a></li> </ul><ul><li><a class="noindex" href="the-i-element.html#the-i-element">i</a><a class="noindex" href="the-iframe-element.html#the-iframe-element">iframe</a><a class="noindex" href="the-img-element.html#the-img-element">img</a><a class="noindex" href="the-input-element.html#the-input-element">input</a><a class="noindex" href="the-ins-element.html#the-ins-element">ins</a><a class="noindex" href="the-kbd-element.html#the-kbd-element">kbd</a><a class="noindex" href="the-keygen-element.html#the-keygen-element">keygen</a></li> </ul><ul><li><a class="noindex" href="the-label-element.html#the-label-element">label</a><a class="noindex" href="the-legend-element.html#the-legend-element">legend</a><a class="noindex" href="the-li-element.html#the-li-element">li</a><a class="noindex" href="the-link-element.html#the-link-element">link</a><a class="noindex" href="the-map-element.html#the-map-element">map</a><a class="noindex" href="the-mark-element.html#the-mark-element">mark</a><a class="noindex" href="the-menu-element.html#the-menu-element">menu</a><a class="noindex" href="the-meta-element.html#the-meta-element">meta</a><a class="noindex" href="the-meter-element.html#the-meter-element">meter</a></li> </ul><ul><li><a class="noindex" href="the-nav-element.html#the-nav-element">nav</a><a class="noindex" href="the-noscript-element.html#the-noscript-element">noscript</a><a class="noindex" href="the-object-element.html#the-object-element">object</a><a class="noindex" href="the-ol-element.html#the-ol-element">ol</a><a class="noindex" href="the-optgroup-element.html#the-optgroup-element">optgroup</a><a class="noindex" href="the-option-element.html#the-option-element">option</a><a class="noindex" href="the-output-element.html#the-output-element">output</a></li> </ul><ul><li><a class="noindex" href="the-p-element.html#the-p-element">p</a><a class="noindex" href="the-param-element.html#the-param-element">param</a><a class="noindex" href="the-pre-element.html#the-pre-element">pre</a><a class="noindex" href="the-progress-element.html#the-progress-element">progress</a><a class="noindex" href="the-q-element.html#the-q-element">q</a><a class="noindex" href="the-rp-element.html#the-rp-element">rp</a><a class="noindex" href="the-rt-element.html#the-rt-element">rt</a><a class="noindex" href="the-ruby-element.html#the-ruby-element">ruby</a></li> </ul><ul><li><a class="noindex" href="the-s-element.html#the-s-element">s</a><a class="noindex" href="the-samp-element.html#the-samp-element">samp</a><a class="noindex" href="the-script-element.html#the-script-element">script</a><a class="noindex" href="the-section-element.html#the-section-element">section</a><a class="noindex" href="the-select-element.html#the-select-element">select</a><a class="noindex" href="the-small-element.html#the-small-element">small</a><a class="noindex" href="the-source-element.html#the-source-element">source</a><a class="noindex" href="the-span-element.html#the-span-element">span</a></li> </ul><ul><li><a class="noindex" href="the-strong-element.html#the-strong-element">strong</a><a class="noindex" href="the-style-element.html#the-style-element">style</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a><a class="noindex" href="the-summary-element.html#the-summary-element">summary</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></li> </ul><ul><li><a class="noindex" href="the-table-element.html#the-table-element">table</a><a class="noindex" href="the-tbody-element.html#the-tbody-element">tbody</a><a class="noindex" href="the-td-element.html#the-td-element">td</a><a class="noindex" href="the-textarea-element.html#the-textarea-element">textarea</a><a class="noindex" href="the-tfoot-element.html#the-tfoot-element">tfoot</a><a class="noindex" href="the-th-element.html#the-th-element">th</a><a class="noindex" href="the-thead-element.html#the-thead-element">thead</a><a class="noindex" href="the-time-element.html#the-time-element">time</a><a class="noindex" href="the-title-element.html#the-title-element">title</a></li> </ul><ul><li><a class="noindex" href="the-tr-element.html#the-tr-element">tr</a><a class="noindex" href="the-track-element.html#the-track-element">track</a><a class="noindex" href="the-u-element.html#the-u-element">u</a><a class="noindex" href="the-ul-element.html#the-ul-element">ul</a><a class="noindex" href="the-var-element.html#the-var-element">var</a><a class="noindex" href="the-video-element.html#the-video-element">video</a><a class="noindex" href="the-wbr-element.html#the-wbr-element">wbr</a></li> </ul><ul class="jumpIndexA-other"><li><a class="noindex" href="global-attributes.html#global-attributes">global attributes</a><a class="noindex" href="index-of-terms.html#index-of-terms">terms</a></li> </ul></div> </div> <script src="jump-indexes.js"> </script><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> </div> <div class="prev_next"> <a href="the-menu-element.html">&slarr; 4.11.4 The menu element</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="links.html">4.12 Links &srarr;</a> <ol class="toc"><li><ol><li><ol><li><a href="commands.html#commands"><span class="secno">4.11.5</span> Commands</a><li><a href="commands.html#the-dialog-element" id="4.11.6-the-dialog-element"><span class="secno">4.11.6</span> The <code>dialog</code> element</a> <ol><li><a href="commands.html#anchor-points"><span class="secno">4.11.6.1</span> Anchor points</a></ol></ol></ol></ol></div> <h4 id="commands"><span class="secno">4.11.5</span> Commands</h4> <p>A <dfn id="concept-command" title="concept-command">command</dfn> is the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share facets such as the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-disabledstate" id="command-facet-disabledstate_0" title="command-facet-DisabledState">Disabled State</a>.</p> <p id="facets">Commands are defined to have the following <dfn id="concept-facet" title="concept-facet">facets</dfn>:</p> <dl><dt><dfn id="command-facet-type" title="command-facet-Type">Type</dfn></dt> <dd>The kind of command: "command", meaning it is a normal command; "radio", meaning that triggering the command will, amongst other things, set the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-checkedstate" id="command-facet-checkedstate_2" title="command-facet-CheckedState">Checked State</a> to true (and probably uncheck some other commands); or "checkbox", meaning that triggering the command will, amongst other things, toggle the value of the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-checkedstate" id="command-facet-checkedstate_3" title="command-facet-CheckedState">Checked State</a>.</dd> <dt><dfn id="command-facet-id" title="command-facet-ID">ID</dfn></dt> <dd>The name of the command, for referring to the command from the markup or from script. If a command has no ID, it is an <dfn id="anonymous-command">anonymous command</dfn>.</dd> <dt><dfn id="command-facet-label" title="command-facet-Label">Label</dfn></dt> <dd>The name of the command as seen by the user.</dd> <dt><dfn id="command-facet-hint" title="command-facet-Hint">Hint</dfn></dt> <dd>A helpful or descriptive string that can be shown to the user.</dd> <dt><dfn id="command-facet-icon" title="command-facet-Icon">Icon</dfn></dt> <dd>An <a href="http://dev.w3.org/html5/spec/single-page.html#absolute-url" id="absolute-url_7">absolute URL</a> identifying a graphical image that represents the action. A command might not have an Icon.</dd>  <dt><dfn id="command-facet-accesskey" title="command-facet-AccessKey">Access Key</dfn></dt> <dd>A key combination selected by the user agent that triggers the command. A command might not have an Access Key.</dd> <dt><dfn id="command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</dfn></dt> <dd>Whether the command is hidden or not (basically, whether it should be shown in menus).</dd> <dt><dfn id="command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</dfn></dt> <dd>Whether the command is relevant and can be triggered or not.</dd> <dt><dfn id="command-facet-checkedstate" title="command-facet-CheckedState">Checked State</dfn></dt> <dd>Whether the command is checked or not.</dd> <dt><dfn id="command-facet-action" title="command-facet-Action">Action</dfn></dt> <dd>The actual effect that triggering the command will have. This could be a scripted event handler, a <a href="http://dev.w3.org/html5/spec/single-page.html#url" id="url_16">URL</a> to which to <a href="http://dev.w3.org/html5/spec/single-page.html#navigate">navigate</a>, or a form submission.</dd> </dl><p>These facets are exposed on elements using the <dfn id="command-api">command API</dfn>:</p> <dl class="domintro"><dt><var title="">element</var> . <code title="dom-command-ro-commandType"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commandtype"> commandType</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-type" id="command-facet-type_3" title="command-facet-Type">Type</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-Element-id"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-element-id">id</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-id" id="command-facet-id_0" title="command-facet-ID">ID</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-command-ro-commandLabel"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commandlabel"> commandLabel</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-label" id="command-facet-label_0" title="command-facet-Label">Label</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-title"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-title">title</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-hint" id="command-facet-hint_0" title="command-facet-Hint">Hint</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-command-ro-commandIcon"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commandicon"> commandIcon</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-icon" id="command-facet-icon_0" title="command-facet-Icon">Icon</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-accessKeyLabel"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-accesskeylabel">accessKeyLabel</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-accesskey" id="command-facet-accesskey_0" title="command-facet-AccessKey">Access Key</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-command-ro-commandHidden"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commandhidden"> commandHidden</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-hiddenstate" id="command-facet-hiddenstate_0" title="command-facet-HiddenState">Hidden State</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-command-ro-commandDisabled"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commanddisabled"> commandDisabled</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-disabledstate" id="command-facet-disabledstate_1" title="command-facet-DisabledState">Disabled State</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-command-ro-commandChecked"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-command-ro-commandchecked"> commandChecked</a></code></dt> <dd> <p>Exposes the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-checkedstate" id="command-facet-checkedstate_4" title="command-facet-CheckedState">Checked State</a> facet of the command.</p> </dd> <dt><var title="">element</var> . <code title="dom-click"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-click">click</a></code>()</dt> <dd> <p>Triggers the <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-action" id="command-facet-action_0" title="command-facet-Action">Action</a> of the command.</p> </dd> </dl><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-commands"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-document-commands"> commands</a></code></dt> <dd> <p>Returns an <code><a href="http://dev.w3.org/html5/spec/single-page.html#htmlcollection">HTMLCollection</a></code> of the elements in the <code><a href="http://dev.w3.org/html5/spec/single-page.html#document" id="document_73">Document</a></code> that define commands and have IDs.</p> </dd> </dl><hr><p>User agents may expose the <a href="http://dev.w3.org/html5/spec/single-page.html#concept-command" id="concept-command_5" title="concept-command">commands</a> whose <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-hiddenstate" id="command-facet-hiddenstate_1" title="command-facet-HiddenState">Hidden State</a> facet is false (visible) and whose elements are <a href="http://dev.w3.org/html5/spec/single-page.html#in-a-document" id="in-a-document_3">in a <code>Document</code></a>. For example, such commands could be listed in the user agent's menu bar. User agents are encouraged to do this especially for commands that have <a href="http://dev.w3.org/html5/spec/single-page.html#command-facet-accesskey" id="command-facet-accesskey_1" title="command-facet-AccessKey">Access Keys</a>, as a way to advertise those keys to the user.</p> <h4 id="the-dialog-element"><span class="secno">4.11.6</span> The <dfn><code>dialog</code></dfn> element</h4> <dl class="element"><dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-categories" id="element-dfn-categories_102" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1" id="flow-content_143">Flow content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#sectioning-root" id="sectioning-root_11">Sectioning root</a>.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-contexts" id="element-dfn-contexts_102" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1" id="flow-content_144">flow content</a> is expected.</dd> <dd>As a child of a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dt-element" id="dt_9">dt</a></code> element.</dd> <dd>As a child of a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-th-element" id="th_23">th</a></code> element.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-content-model" id="element-dfn-content-model_102" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1" id="flow-content_145">Flow content</a>.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-attributes" id="element-dfn-attributes_102" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#global-attributes" id="global-attributes_103">Global attributes</a></dd> <dd><code title="attr-dialog-open"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-dialog-open" id="open_4">open</a></code></dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-dom" id="element-dfn-dom_102" title="element-dfn-dom">DOM interface</a>:</dt>  <dd> <pre class="idl"> interface <dfn id="htmldialogelement">HTMLDialogElement</dfn> : <a href="http://dev.w3.org/html5/spec/single-page.html#htmlelement" id="htmlelement_111">HTMLElement</a> { attribute boolean <a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-open" title="dom-dialog-open">open</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-returnvalue" title="dom-dialog-returnValue">returnValue</a>; void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-show" title="dom-dialog-show">show</a>(optional (<a href="http://dev.w3.org/html5/spec/single-page.html#mouseevent-10">MouseEvent</a> or <a href="http://dev.w3.org/html5/spec/single-page.html#element">Element</a>) anchor); void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-showmodal" title="dom-dialog-showModal">showModal</a>(optional (<a href="http://dev.w3.org/html5/spec/single-page.html#mouseevent-10">MouseEvent</a> or <a href="http://dev.w3.org/html5/spec/single-page.html#element">Element</a>) anchor); void <a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-close" title="dom-dialog-close">close</a>(optional DOMString returnValue); }; </pre></dd> </dl><p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_6">dialog</a></code> element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.</p> <p>The <dfn id="attr-dialog-open" title="attr-dialog-open"><code>open</code></dfn> attribute is a <a href="http://dev.w3.org/html5/spec/single-page.html#boolean-attribute" id="boolean-attribute_27">boolean attribute</a>. When specified, it indicates that the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_7">dialog</a></code> element is active and that the user can interact with it.</p>  <dl class="domintro"><dt><var title="">dialog</var> . <code title="dom-dialog-show"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-show">show</a></code>( [ <var title="">anchor</var> ] )</dt> <dd> <p>Displays the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_8">dialog</a></code> element.</p> <p>The argument, if provided, provides an anchor point to which the element will be fixed.</p> </dd> <dt><var title="">dialog</var> . <code title="dom-dialog-showModal"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-showmodal"> showModal</a></code>( [ <var title="">anchor</var> ] )</dt> <dd> <p>Displays the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_9">dialog</a></code> element and makes it the top-most modal dialog.</p> <p>The argument, if provided, provides an anchor point to which the element will be fixed.</p> <p>This method honors the <code title="attr-fe-autofocus"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-fe-autofocus" id="autofocus_11">autofocus</a></code> attribute.</p> </dd> <dt><var title="">dialog</var> . <code title="dom-dialog-close"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-close">close</a></code>( [ <var title="">result</var> ] )</dt> <dd> <p>Closes the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_10">dialog</a></code> element.</p> <p>The argument, if provided, provides a return value.</p> </dd> <dt><var title="">dialog</var> . <code title="dom-dialog-returnValue"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-returnvalue"> returnValue</a></code> [ = <var title="">result</var> ]</dt> <dd> <p>Returns the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-dialog-element" id="dialog_11">dialog</a></code>'s return value.</p> <p>Can be set, to update the return value.</p> </dd> </dl><h5 id="anchor-points"><span class="secno">4.11.6.1</span> Anchor points</h5> <p class="critical">This section 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> <table class="css-property"><caption>'anchor-point'</caption> <tr><th>Value:</th> <td>none | <position></td> <tr><th>Initial:</th> <td>none</td> <tr><th>Applies to:</th> <td>all elements</td> <tr><th>Inherited:</th> <td>no</td> <tr><th>Percentages:</th> <td>refer to width or height of box; see prose</td> <tr><th>Media:</th> <td>visual</td> <tr><th>Computed value:</th> <td>The specified value, but with any lengths replaced by their corresponding absolute length</td> <tr><th>Animatable:</th> <td>no</td> <tr><th>Canonical order:</th> <td>per grammar</td> </table><p>The 'anchor-point' property specifies a point to which dialog boxes are to be aligned.</p> <p>If the value is a <position>, 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="http://dev.w3.org/html5/spec/single-page.html#refsCSSVALUES">[CSSVALUES]</a> <a href="http://dev.w3.org/html5/spec/single-page.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="http://dev.w3.org/html5/spec/single-page.html#dom-dialog-open">open()</a></code> method above).</p>