コンテンツにスキップ

HTML Living Standard/noscript

出典: フリー教科書『ウィキブックス(Wikibooks)』

noscript 要素

[編集]

<noscript> 要素は、スクリプトが無効な場合、またはスクリプトをサポートしないブラウザーで提供される代替コンテンツを指定するために使用されます。この要素は、スクリプトが動作しない環境でのフォールバックとして役立ちます。

カテゴリ

[編集]
  • メタデータコンテンツ(ただし、<head> 内にある場合のみ)
  • フローコンテンツ
  • フレージングコンテンツ

使用される文脈

[編集]
  • フローコンテンツが期待される場所(<body> 内)
  • メタデータコンテンツが期待される場所(<head> 内)

コンテンツモデル

[編集]
  • <head> 内の場合: メタデータコンテンツまたは、<link> 要素、<style> 要素。
  • <body> 内の場合: フローコンテンツ。

タグの省略

[編集]
  • 開始タグと終了タグは省略できません。

コンテンツ属性

[編集]

<noscript> 要素は、グローバル属性のみをサポートします。

アクセシビリティの考慮事項

[編集]
  • 代替コンテンツの提供:
    • <noscript> 要素内に配置するコンテンツは、スクリプトが無効な環境で利用できる代替手段として適切に設計する必要があります。
    • 例えば、重要なナビゲーション機能がJavaScriptに依存する場合は、代替の静的なナビゲーションリンクを提供することが推奨されます。
  • コンテンツの冗長性:
    • <noscript> 要素に記載された代替コンテンツが、スクリプトが有効な環境でユーザーに表示されることはありません。そのため、スクリプト有効時のコンテンツと過剰に重複しないよう設計する必要があります。

使用例

[編集]

以下は <noscript> 要素の基本的な使用例です。

<!-- スクリプトが無効な場合に表示されるメッセージ -->
<noscript>
  このページではJavaScriptを使用していますが、現在JavaScriptが無効になっています。
  JavaScriptを有効にするか、最新のブラウザーをご利用ください。
</noscript>

head 内での使用例

[編集]

<head> 要素内で <noscript> 要素を使用する場合、スタイルや代替リソースを提供する目的で使用します。

<head>
  <noscript>
    <link rel="stylesheet" href="noscript-styles.css">
  </noscript>
</head>

body 内での使用例

[編集]

<body> 要素内で <noscript> 要素を使用する場合、代替メッセージや静的コンテンツを提供します。

<body>
  <noscript>
    <p>この機能を利用するには、JavaScriptを有効にする必要があります。</p>
  </noscript>
</body>

関連仕様

[編集]