Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<noscript>

『noscript』はJavaScriptが無効または非対応のブラウザに対して、代替コンテンツを表示するための要素です。

構文

<!-- head内に記述する場合（link / style / meta のみ使用可） -->
<head>
  <noscript>
    <link rel="stylesheet" href="no-js.css">
  </noscript>
</head>

<!-- body内に記述する場合（任意のHTML要素を使用可） -->
<body>
  <noscript>
    <p>このページを正しく表示するには、JavaScriptを有効にしてください。</p>
  </noscript>
</body>

使用できる場所

配置場所	概要
head内	子要素として『link』・『style』・『meta』のみ使用できます。スクリプトが無効な場合にのみ適用されるCSSなどを指定します。
body内	任意のHTML要素を記述できます。スクリプトが無効な場合に表示するメッセージや代替コンテンツを記述します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>noscriptサンプル</title>

  <!-- JSが無効な場合にのみ読み込まれるCSS -->
  <noscript>
    <style>
      .js-only { display: none; }
      .no-js-message { display: block; }
    </style>
  </noscript>
</head>
<body>

  <!-- JavaScriptが有効な場合に表示する要素 -->
  <div class="js-only">
    <button id="loadBtn">コンテンツを読み込む</button>
    <div id="content"></div>
  </div>

  <!-- JavaScriptが無効な場合のフォールバック -->
  <noscript>
    <div class="no-js-message">
      <p>このページはJavaScriptを使用しています。</p>
      <p>ブラウザの設定でJavaScriptを有効にしてから再度お試しください。</p>
    </div>
  </noscript>

  <script>
    document.getElementById("loadBtn").addEventListener("click", function() {
      document.getElementById("content").textContent = "読み込みました！";
    });
  </script>

</body>
</html>

実行結果

JavaScriptが有効な場合はボタンが表示され、クリックするとテキストが現れます。JavaScriptが無効な場合はボタンの代わりにメッセージが表示されます。

<!-- JavaScriptが有効な場合 -->
[コンテンツを読み込む]ボタンが表示される

<!-- JavaScriptが無効な場合 -->
このページはJavaScriptを使用しています。
ブラウザの設定でJavaScriptを有効にしてから再度お試しください。

概要

現代のブラウザはほぼすべてJavaScriptに対応していますが、ユーザーがセキュリティ上の理由でJavaScriptを無効にしていたり、古いブラウザを使用している場合があります。『noscript』を活用すると、そのような環境でも最低限のコンテンツを提供できます。

Googleなどの検索エンジンのクローラーもJavaScriptを完全には実行しないことがあります。重要なコンテンツをJavaScriptのみで表示している場合、SEO（検索エンジン最適化）に影響することがあります。重要なコンテンツはJavaScriptに依存せず、HTMLとして提供することを推奨します。

『noscript』は『script』要素とセットで考えるとわかりやすいです。『script』で動的な機能を提供しつつ、『noscript』でその機能が使えない環境へのフォールバックを用意するという設計が理想的です。