noscript要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Metadata content
• Flow content
• Phrasing content

配置できる場所

• HTML構文においては、上記カテゴリーの要素が置ける場所。ただし、noscript要素を祖先に持ってはならない。
• XML構文においては、どこにも置けない。すなわち、使用禁止。

内容モデル

• head要素の子である場合は、下記のいずれか。混在も可。
  • 0個以上のmeta要素。
  • 0個以上のlink要素。
  • 0個以上のstyle要素。
• head要素の子でない場合は、Transparent。ただし、noscript要素を子孫に含んではならない。

• main要素の規定による制限
  • main要素を子孫に含んではならない。

• 他の要素の規定による制限
  • head要素の子であるnoscript要素の子として配置できるmeta要素は、文字エンコーディングを指定しないhttp-equiv属性が指定されたものに限る。

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• すべてのrole及びすべてのaria-*属性は指定不可。

視覚系ブラウザのデフォルトとして期待されるCSS

  @media(scripting) {
    noscript {display: none !important;}
  }
  

意味・用法

スクリプトが無効な場合にのみ表示（head要素内の場合は、有効）となるコンテンツを指定する。

スクリプトが有効な場合は、その内容は表示（head要素内の場合は、有効と）されない。

スクリプトをサポートするユーザーエージェントとサポートしないユーザーエージェントに異なるコンテンツを提示するために使用される。

noscript要素内のフォームや要素は、スクリプトが有効なため表示されてなくても、スクリプト等で操作はできる。

私見・補足

スクリプトが無効な場合の代替コンテンツとなる。

noscript要素内にscript要素を配置できる場合もあるようだが、なんとも奇妙なのでやめた方がいいだろう。

ユーザーエージェントにおいてスクリプトが有効である限り、個別の外部スクリプトの読み込みに失敗したり、個別のスクリプトがスクリプト内の要因で機能しない場合でも、当該要素による代替コンテンツは表示されない。

HTML Living Standardではこの要素の使用はあまり推奨されておらず、代替コンテンツをデフォルトで表示状態にしておいてスクリプトで消去する方法（スクリプトが無効なら表示状態のままになって、代替コンテンツとして機能する）が例示されている。

表示確認

ソース

  <div>スクリプトが有効なら下記に記載している文は表示されないはず。</div>
  <noscript>
    スクリプトが無効です。
  </noscript>
  

表示結果

スクリプトが有効なら下記に記載している文は表示されないはず。