4.3.2 noscript 要素

カテゴリー

メタデータ・コンテンツ

フロー・コンテンツ

フレージング・コンテンツ

この要素を使うことができるコンテキスト：

祖先に noscript 要素がないなら、HTML ドキュメントの head 要素の中。

祖先に noscript 要素がないなら、HTML ドキュメントの中でフレージング・コンテンツが期待される場所

コンテンツ・モデル：

スクリプティングが無効で、head 要素の中なら： 0個以上の link 要素、0個以上の style 要素、0個以上の meta 要素。順番は任意。

スクリプティングが無効で、head 要素の中でないなら：トランスペアレント。しかし、子孫に noscript 要素がないこと。

そうでなければ：本文に与えられた要件に準拠するテキスト

コンテンツ属性：

グローバル属性

DOMインタフェース：

HTMLElement を使う。

noscript 要素は、スクリプティングが有効であれば、何も表しません。スクリプティングが無効であれば、その子要素を表します。この要素は、ドキュメントのパース方法に作用することによって、スクリプティングをサポートするユーザーエージェントと、サポートしていないユーザーエージェントとで、異なるマークアップを提示するために使われます。

HTML ドキュメント内で使われたとき、利用可能なコンテンツ・モデルは、以下の通りです：

head 要素の中で、noscript 要素に対してスクリプティングが無効なら

noscript 要素には、 link, style, meta 要素しか入れてはいけません。

head 要素の中で、noscript 要素に対してスクリプティングが有効なら

noscript 要素にはテキストしか入れてはいけません。ただし、コンテキスト要素としての noscript 要素と、入力としてのテキスト・コンテンツを使って HTML フラグメント・パース・アルゴリズムを呼び出した結果が、link, style, meta 要素のみから構成されるノードのリストでなければならず、パース・エラーがあってはいけない、という点については除きます。

head 要素の外で、noscript 要素に対してスクリプティングが無効なら

noscript 要素のコンテンツ・モデルはトランスペアレントです。ただし、その noscript 要素は祖先に noscript 要素を持ってはいけないという制限が加わります。

head 要素の外で、noscript 要素に対してスクリプティングが有効なら

noscript 要素にはテキストしか入れてはいけません。ただし、そのテキストは、次のアルゴリズムのを実行したら、noscript 要素も script 要素もない準拠ドキュメントとならなければいけないという点と、そのアルゴリズムの中で、HTML パーサーがパース・エラーを引き起こさないようでなければならないという点を除きます：

1. ドキュメントから、すべての script 要素を削除します。
2. ドキュメント内のすべての noscript 要素のリストを作ります。そのリスト内のすべての noscript 要素に対して、次の手順を実行します：
   1. parent element を、noscript 要素の親要素とします。
   2. parent element の子のうち、noscript 要素の前にあるすべての子を取り出します。これらの要素を before children と呼びます。
   3. parent element の子のうち、noscript 要素の後にあるすべての子をを取り出します。これらの要素を after children と呼びます。
   4. s を、noscript 要素の子のテキストノードを連結したものにします。
   5. parent element の innerHTML 属性に、s の値をセットします。（これは、副作用として、noscript 要素がドキュメントから削除されることになります。）
   6. parent element の最初に、もともとの順番を維持したまま、before children を挿入します。
   7. parent element の最後に、もともとの順番を維持したまま、after children を挿入します。

これらすべての歪みは必要なのです。これは、歴史的な理由から、呼び出し時にスクリプティングが有効だったかそうでなかったかに基づいているHTML パーサーで、noscript 要素の扱いが異なるからです。

noscript 要素は、XML ドキュメントでは使ってはいけません。

noscript 要素は、HTML 構文でのみ効果があります。XHTML 構文ではまったく効果はありません。

<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>

<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>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-noscript-element