<noscript></noscript>
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ |
利用場所 | head要素の子要素として / フレージング・コンテンツが置ける場所 どちらの場合も祖先にnoscript要素が存在してはならない |
内容 | head要素内で使用する場合:link要素を0個以上、style要素を0個以上、meta要素を0個以上(順不同) / body要素内で使用する場合:トランスペアレント(親要素のコンテンツモデルを継承) ただし、noscript要素は含められない |
noscript要素は、スクリプトが利用できない環境向けの代替コンテンツを表します。この要素は、head要素内とbody要素内のどちらにも配置することができます。
<noscript>
スクリプトが利用できない環境用の内容
</noscript>
この要素の内容は、スクリプトが無効の環境でのみ表示(利用)されることになります。(スクリプトが有効の環境では何も表示されません)
head要素内での使用について
head要素内で使用する場合は、noscript要素の内容にlink要素、style要素、meta要素を配置することができます。
これらの要素を使用することで、例えば次のようなことが可能となります。
- スクリプトが利用できない場合は違うスタイルを適用させる。
- スクリプトが利用できない場合は別のページにリダイレクトする。
- 旧HTMLからの変更点
-
- HTML5:head要素内に配置できるようになりました。
使用例
<!DOCTYPE html>
<html>
<head>
<title>noscript要素の使用例</title>
</head>
<body>
<h1>noscript要素の使用例</h1>
<script>
document.write('<p>あなたのブラウザはJavaScriptが利用できます。<\/p>');
</script>
<noscript>
<p>あなたのブラウザはJavaScriptが利用できません。</p>
</noscript>
...
</body>
</html>
- 表示例
<!DOCTYPE html>
<html>
<head>
<noscript>
<link rel="stylesheet" href="noscript.css">
</noscript>
<title>文書のタイトル</title>
</head>
<body>
<p>noscript.css 内で、p.msg { visibility: hidden; } を指定しています。</p>
<p class="msg">スクリプトを利用できないブラウザでは、この段落のテキストは表示されません。</p>
</body>
</html>
- 実際のサンプルはlink要素のページでご覧ください。
<!DOCTYPE html>
<html>
<head>
<noscript>
<meta http-equiv="refresh" content="5; URL=http://www.example.com/">
</noscript>
<title>文書のタイトル</title>
</head>
<body>
<noscript>
<p>スクリプトが利用できないブラウザでは、5秒後に下記のURLへリダイレクトされます。</p>
<p><a href="http://www.example.com/">http://www.example.com/</a></p>
</noscript>
<p>スクリプトが利用できるブラウザでは、リダイレクトは行われません。</p>
</body>
</html>
- 実際のサンプルはmeta要素のページでご覧ください。