＜noscript要素＞ - スクリプトが無効のブラウザ向けのコンテンツ

公開日: 2017/02/09

noscript要素を利用すると、JavaScriptが無効な環境の場合にのみ、あるコンテンツを提供することができます。

概要

名前: noscript (No Script)
カテゴリー: Metadata content; Flow content; Phrasing content
配置できる場所: head要素内、または、Phrasing contentが期待される場所。
コンテンツモデル: head要素内にある場合、0個以上のlink要素、0個以上のmeta要素、0個以上のstyle要素。; head要素内にない場合、Transparent content。; ただし、別のnoscript要素の先祖になってはいけない。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLElement
仕様書: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

何らかの理由でJavaScriptが動作していないブラウザ向けにコンテンツを提供することができます。noscript要素でマークアップしたコンテンツは、JavaScriptが有効な場合は無視され、無効な場合に処理されます。

HTML

<!-- スクリプトが無効な場合にだけ表示される -->
<noscript>
	お使いのブラウザは、JavaScriptが無効です。
</noscript>

head要素内にあるnoscript要素は、link要素、meta要素、style要素を持つことができます。スクリプトが無効な場合にだけスタイルを適用したい場合などに有用です。もちろん、スクリプトが有効な場合は無視され、処理の対象にはなりません。

HTML

<!-- head内のnoscript要素 -->
<head>
	<noscript>
		<style>
			body {
				color: red ;
			}
		</style>
	</noscript>
<head>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜noscript要素＞ - スクリプトが無効のブラウザ向けのコンテンツ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/noscript/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>noscript要素は、スクリプトが無効な場合にのみ、提供したいコンテンツをマークアップする要素です。</p>

<noscript>
お使いのブラウザは、JavaScriptが有効ではありません…。
</noscript>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/671/"> <meta charset="utf-8"> <title>【デモ】＜noscript要素＞ - スクリプトが無効のブラウザ向けのコンテンツ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/noscript/"> </head> <body>

<p>noscript要素は、スクリプトが無効な場合にのみ、提供したいコンテンツをマークアップする要素です。</p> <noscript> お使いのブラウザは、JavaScriptが有効ではありません…。 </noscript>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>