noscript 要素

4.11.2 noscript 要素

カテゴリー:
メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
この要素を使うことができるコンテキスト:
HTML ドキュメントhead 要素の中。ただし、祖先に noscript 要素がないこと。
HTML ドキュメントフレージング・コンテントが期待される場所。ただし、祖先に noscript 要素がないこと。
コンテントモデル:
スクリプティングが無効で、head 要素の中にある場合: 0 個以上の link 要素、0 個以上の style 要素、0 個以上の meta 要素。順番は任意。
スクリプティングが無効で、head 要素の中にない場合:トランスペアレント。ただし、子孫に noscript 要素がないこと。
それ以外の場合: 本文に書かれている要件に準拠するテキスト。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
HTMLElement を使う。

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

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

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

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

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

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

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

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

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

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

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

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

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

noscript 要素は、HTML 構文でのみ効果があります。XHTML 構文ではまったく効果はありません。これは、それが作用する方法が、スクリプトが有効のときに "パーサーをオフ" にすることで、この要素のコンテンツが本当の要素ではなく純粋なテキストとして扱われるようにしているからです。XML は、これを行うメカニズムを定義していません。

noscript 要素には他に要件はありません。特に、noscript 要素の子は、その要素に対してスクリプティングが有効であったとしても、フォームサブミッション、スクリプティングなどから除外されるわけではありません。

次の例では、noscript 要素がスクリプトのフォールバックを提供するために使われています。

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

スクリプトが無効なとき、サーバー側で計算を行うためにボタンが現れます。スクリプトが有効なときは、その値は動的に計算されます。

noscript 要素は鈍器ではありません。スクリプトが有効であるにも関わらず、何らかの理由でページのスクリプトが失敗することもあるでしょう。一般的には、この理由のために noscript の利用は避けた方が良いと言えます。代わりに、次の例のように、スクリプトが動かないページをもとに、スクリプトを使うページへと、動的にページを変更するよう、スクリプトを設計した方が良いと言えます:

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

上記のテクニックは、XHTML でも役に立ちます。なぜなら、XHTML 構文では noscript がサポートされないのですから。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-noscript-element