noscriptタグ -JavaScript 無効時の代替コンテンツを定義する｜HTML辞典
<noscript>タグとは？
<noscript> タグは、JavaScript が無効な環境で表示される代替コンテンツを定義するためのタグです。
ユーザーのブラウザで JavaScript がオフになっている場合や、サポートされていない場合に、フォールバックメッセージや代替コンテンツを提供できます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<noscript> は開始タグ（<noscript>）と閉じタグ（</noscript>）の両方が必要です。
基本的な記述方法
<noscript>
<p>JavaScript が無効になっています。このサイトのすべての機能を利用するには、JavaScript を有効にしてください。</p>
</noscript>
使用できる主な属性
<noscript> タグには特別な属性はありませんが、通常は <script> タグとセットで使用されます。
CSSを使ったデザイン変更
<noscript> の内容は通常の HTML と同じように CSS で装飾できます。
noscript {
color: red;
font-weight: bold;
}
適切な使用例
✅ JavaScript 無効時にメッセージを表示する
<noscript>
<p>このサイトを正しく表示するには、JavaScript を有効にしてください。</p>
</noscript>
✅ 代替の静的コンテンツを提供する
<noscript>
<img src="static-image.jpg" alt="JavaScriptが無効な場合の代替画像">
</noscript>
✅ Google Analytics などのトラッキングコードに使用する
<noscript>
<img src="https://www.googletagmanager.com/ns.html?id=UA-XXXXX-X" width="1" height="1" style="display:none">
</noscript>
適切でない使用例（誤った使い方）
❌ <noscript> を <body> の外で使用すると機能しない
<!-- NG: <head> 内で使用 -->
<head>
<noscript>
<p>JavaScript を有効にしてください。</p>
</noscript>
</head>
✅ 正しい書き方（<body> 内に配置）
<body>
<noscript>
<p>JavaScript を有効にしてください。</p>
</noscript>
</body>
❌ <noscript> 内に JavaScript を記述しても実行されない
<!-- NG: <noscript> 内に JavaScript を記述 -->
<noscript>
<script>
alert("これは実行されません。");
</script>
</noscript>
✅ 正しい書き方（<noscript> 内には純粋な HTML を記述）
<noscript>
<p>JavaScript を有効にしてください。</p>
</noscript>
<noscript>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<noscript> | JavaScript 無効時の代替表示 | JavaScript が無効な環境でのみ表示 | 重要な通知やフォールバックコンテンツ |
<script> | JavaScript を実行 | JavaScript を記述可能 | 動的な処理やアニメーション |
<meta> | ページ情報を提供 | <noscript> では代替できない | SEO やリダイレクト設定 |
使用上の注意点
✅ <noscript> は <body> 内に配置する
<head>内では機能しない。
✅ <noscript> 内には JavaScript を記述しない
JavaScriptを記述しても実行されないため、純粋な HTML を使用する。
関連タグ
まとめ
<noscript> タグは、HTML文書内で JavaScript が無効な環境で表示される代替コンテンツを定義するためのタグ です。
重要な通知やフォールバックメッセージを提供し、ユーザーの利便性を向上させるために使用されます。
