noscript要素の使い方|JavaScript非対応ブラウザへの配慮とHTML5での変更点
ユーザーの中には、JavaScriptを無効にしていたり、スクリプトをサポートしないブラウザ(ユーザーエージェント)を使用している場合があります。こうした環境では、通常のJavaScriptによる処理は実行されません。
そのようなときに役立つのが noscript要素 です。JavaScriptが無効な環境でのみ表示されるメッセージや代替コンテンツを提供できます。
noscript要素とは?
<noscript> 要素は、次のような場合にだけ内容が表示されます。
- ユーザーがJavaScriptを無効にしている
- ブラウザがJavaScriptをサポートしていない
逆に、JavaScriptが有効な環境では、<noscript> 内の内容は一切表示されません。
例として、JavaScript非対応環境にメッセージを表示するコードは次のようになります。
このページはJavaScript対応ブラウザでご覧ください。
</noscript>
noscript要素の注意点(XML / XHTMLでは使用不可)
noscript要素はHTML構文でのみ有効です。
- XML文書では使用できない
- XHTML構文でも有効にならない
そのため、HTML5(HTML構文)で利用する場合にのみ効果があります。
HTML4.01 と HTML5 の違い
HTML4.01 と HTML5 では、noscript要素の扱いに違いがあります。
HTML4.01 の仕様
<noscript>を head要素内に置くことは不可- body内でのみ使用可能
HTML5 の仕様
- head要素内に配置してもよい
- head内のnoscriptには、以下の要素を含めてもよい
<link><style><meta>
HTML5では柔軟性が高まり、JavaScript無効環境向けのスタイルやメタ情報を head 内で提供できるようになりました。