noscript
elementhead
element of an HTML document, if there are no ancestor
noscript
elements.noscript
elements.head
element: in any order, zero or more
link
elements, zero or more style
elements, and zero or more
meta
elements.head
element: transparent, but there must be no
noscript
element descendants.HTMLElement
.The noscript
element represents
nothing if scripting is enabled, and represents
its children if scripting is disabled. 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.
When used in HTML documents, the allowed content model is as follows:
head
element, if scripting is disabled for the
noscript
elementThe noscript
element must contain only
link
, style
, and meta
elements.
head
element, if scripting is enabled for the
noscript
elementThe noscript
element must contain only
text, except that invoking the
HTML fragment parsing algorithm
with the
noscript
element as the
context element and the text contents as the input must result in a list of nodes that consists only of
link
, style
, and meta
elements that would be conforming if they were children of the
noscript
element, and no parse errors.
head
elements, if scripting is disabled for the
noscript
elementThe noscript
element's content model is
transparent, with the additional restriction
that a noscript
element must not have a
noscript
element as an ancestor (that
is, noscript
can't be nested).
head
elements, if scripting is enabled for the
noscript
elementThe noscript
element must contain only
text, except that the text must be such that running the following
algorithm results in a conforming document with no noscript
elements and no script
elements, and such that no step in the algorithm causes an HTML
parser to flag a parse
error:
script
element from the document.noscript
element in the document. For
every noscript
element in that list, perform
the following steps:
noscript
element.noscript
element, and call these
elements the before children.noscript
element, and call these
elements the after children.Text
node children of the noscript
element.innerHTML
attribute of the parent element to the value of
s. (This, as a side-effect, causes the
noscript
element to be removed from the
document.)All these contortions are required because, for
historical reasons, the noscript
element is handled differently
by the HTML
parser based on whether scripting was enabled or not when the
parser was invoked.
The noscript
element must not be used in
XML
documents.
The noscript
element is only effective in
the HTML syntax, it has no effect in
the
XHTML syntax. 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.
In the following example, a noscript
element is used to provide
fallback for a script.
<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>
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.
The noscript
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 noscript
, 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:
<form action="calcSquare.php"> <p> <label for=x>Number</label>: <input id="x" name="x" type="number"> </p> <input id="submit" type=submit value="Calculate Square"> <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; }; var submit = document.getElementById('submit'); submit.parentNode.removeChild(submit); </script> </form>
The above technique is also useful in XHTML, since
noscript
is not supported in the
XHTML syntax.