現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】noscript要素の使い方|非対応ブラウザへの配慮とHTML5での変更点

投稿日:2019年4月7日 更新日:

noscript要素の使い方|JavaScript非対応ブラウザへの配慮とHTML5での変更点

ユーザーの中には、JavaScriptを無効にしていたり、スクリプトをサポートしないブラウザ(ユーザーエージェント)を使用している場合があります。こうした環境では、通常のJavaScriptによる処理は実行されません。

そのようなときに役立つのが noscript要素 です。JavaScriptが無効な環境でのみ表示されるメッセージや代替コンテンツを提供できます。



noscript要素とは?

<noscript> 要素は、次のような場合にだけ内容が表示されます。

  • ユーザーがJavaScriptを無効にしている
  • ブラウザがJavaScriptをサポートしていない

逆に、JavaScriptが有効な環境では、<noscript> 内の内容は一切表示されません。

例として、JavaScript非対応環境にメッセージを表示するコードは次のようになります。

<noscript>
    このページは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 内で提供できるようになりました。



関連リンク

-基礎
-

執筆者:

関連記事

【JavaScript入門】イベントとイベントハンドラの基本|onclick・onload・onmouseoverの使い方を解説

JavaScriptのイベントとイベントハンドラの基本|onclick・onload・onmouseoverを初心者向けに解説 JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベ …

【JavaScript入門】関数の基本|定義方法・引数・return・呼び出し方を初心者向けに解説

JavaScriptの関数とは?定義方法・引数・return・呼び出し方を初心者向けに解説 JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。関数 …

【JavaScript入門】オブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説

JavaScriptのオブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説 JavaScriptは「オブジェクトベース」のスクリプト言語です。 Webページを操作するうえで欠 …

【JavaScript入門】デフォルトのスクリプト言語を指定する方法|Content-Script-Type の使い方

JavaScriptのデフォルトスクリプト言語を指定する方法|Content-Script-Type の使い方を解説 HTMLでは複数のスクリプト言語(JavaScript、VBScript など)を …

【JavaScript入門】コメントの書き方を解説|1行コメントと複数行コメントの使い分け

JavaScriptのコメントの書き方|1行コメントと複数行コメントを初心者向けに解説 プログラムには「コメントを書く派」と「書かない派」がいますが、実務ではコメントがないコードは理解が難しくなること …