html5/spec/the-noscript-element.html - view

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

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

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

<!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>4.3.2 The noscript element — HTML5</title><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="the-script-element.html" rel="prev" title="4.3.1 The script element"> <link href="index.html#contents" rel="contents" title="Table of contents"> <link href="sections.html" rel="next" title="4.4 Sections"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> <h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 21 November 2012</h2> </div> <nav class="prev_next"> <a href="the-script-element.html">&slarr; 4.3.1 The script element</a> – <a href="index.html#contents">Table of contents</a> – <a href="sections.html">4.4 Sections &srarr;</a> </nav> <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> <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> </dl><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.</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>  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>.</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).</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><form action="calcSquare.php"> <p> <label for=x>Number</label>: <input id="x" name="x" type="number"> </p> <script> 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; }; </script> <noscript> <input type=submit value="Calculate Square"> </noscript> </form></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><form action="calcSquare.php"> <p> <label for=x>Number</label>: <input id="x" name="x" type="number"> </p> <strong><input id="submit" type=submit value="Calculate Square"></strong> <script> 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> </script> </form></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>