形式

<script>～</script>

サポート

LS / H3 / e3 / Ch1 / Fx1 / Sa1 / Op1 / N2

カテゴリ

メタデータコンテンツ

フローコンテンツ

フレージングコンテンツ

スクリプトサポート要素

親要素

メタデータコンテンツ, フレージングコンテンツ, スクリプトサポート要素 を子要素に持てるもの

子要素

src 属性がない場合: type 属性の値に従い、スクリプトコンテキストの制約に合致したもの。

src 属性がある場合: 空、もしくは、スクリプトコンテキストの制約に合致したスクリプト文書。

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

src

type

nomodule

async

defer

crossorigin

integrity

referrerpolicy

blocking

fetchpriority

<script> は、JavaScript などのスクリプトを記述するために用います。

主に JavaScript を実行するために使用されますが、VBScript など別のスクリプトも実行可能です。

JavaScript に関する詳細は「とほほのJavaScriptリファレンス」などを参照してください。

グローバル属性

詳細は グローバル属性 を参照してください。

type=type

LS/H4/e4/Ch/Fx/Sa/Op/N4

スクリプトの言語を type="text/javascript" のような MIMEタイプで指定します。HTML4.01では必須の属性として定義されていましたが、HTML5 では省略時は type="text/javascript" とみなされるようになりました。

src=url

LS/H4/e4/Ch/Fx/Sa/Op/N3

外部スクリプトファイルのURLを指定します。詳細は後述の 外部スクリプトファイル を参照してください。

async

LS/H5/Ch/Ed/Fx/e/Op/Sa

スクリプトを非同期に読み込み・実行します。詳細は 後述。

defer

LS/H4/Ch/Ed/Fx3.5/e10/Sa

スクリプトを非同期に読み込みます。詳細は 後述。

crossorigin=state

LS/H5

CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。

integrity

LS/Ch45/Fx43

スクリプト改竄チェックで使用されるハッシュ値を指定します。詳細は後述の スクリプト改竄チェック を参照してください。

charset=charset

H4

スクリプトのキャラクタセットを指定します。HTML Living Standard には採用されていません。

nonce=nonce

H5.1

CSP(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。

referrerpolicy=referrerpolicy

LS

リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。詳細は <a referrerpolicy="..."> を参照してください。

blocking=mode

LS/Ch/Ed/Op

blocking="render" を指定するとスクリプトを読み込む際にレンダリングをブロッキングすることを提示します。(→ サポート状況)

nomodule

LS/Ch/Fx

ES6 modules に対応していないブラウザに対するスクリプトを実行する場合に指定します。ES6 modules 対応ブラウザではこのスクリプトの実行を抑制します。詳細は後述の ES6 modules を参照してください。(→ サポート状況)

fetchpriority=priority

LS/Ch/Ed/Sa

ファイルを読み込む優先度を指定します。(→ サポート状況)

high

通常より高い優先度でファイルを読み込みます。

low

通常より低い優先度でファイルを読み込みます。

auto

通常の優先度でファイルを読み込みます。(デフォルト)

language=lang

[非推奨] H4T-4T/e2/N2

スクリプト言語を指定します。現在では type属性を使用することが推奨されています。

event=event

[非推奨] H4-4/e4

将来の機能のために予約されていましたが、HTML5 では廃止されました。

for=id

[非推奨] H4-4/e3

将来の機能のために予約されていましたが、HTML5 では廃止されました。

<script>～</script> の間にスクリプトを記述します。スクリプトは通常 JavaScript を記述します。

<script>
alert("Hello world!");
</script>

以前は、スクリプトに対応していないブラウザのために、スクリプトを下記の様に HTML のコメントとして記述していました。現在は、<script> に対応していないブラウザは皆無のため、コメント化しないことが多くなりました。

<script>
<!--
alert("Hello world!");
// -->
</script>

type 属性でスクリプト種別を指定します。HTML 4.01 では type 属性は必須とされていましたが、HTML5 では省略時は "text/javascript" とみなされるようになりました。JavaScript 以外の言語を使用する場合に type 属性を指定します。例えば、IE3～IE10 でサポートされていた VBScript(text/vbscript) を用いるには次のようにします。

<script type="text/vbscript">
msgbox "Hello world!"
</script>

VBScript は IE11 で基本的には廃止されました。IE11 で VBScript を動かすためにはヘッダ部に下記を記述する必要があります。

<meta http-equiv="x-ua-compatible" content="IE=10">

src 属性を用いると、JavaScript ファイルを外部ファイルで記述することができます。例えば、sample.js ファイルに下記の内容を記述しておきます。<script> は不用です。

alert("Hello!!");

これを、HTMLファイルから下記のように呼び出します。

<script src="sample.js"></script>

通常は、HTML のパース中にスクリプトの読み込みが指定されると、ブラウザは HTML の解析を中断し、スクリプトを読み込み、実行し、その後、HTML の解析を再開します。

<script src="sample.js"></script>

async 属性を指定すると、HTML の解析と、スクリプトの読み込み・実行を非同期に平行して行います。

<script async src="sample.js"></script>

defer 属性を指定すると、HTML の解析と、スクリプトの読み込みを非同期に平行しておこないますが、スクリプトの実行は、HTML の解析が完了した後で行われます。

<script defer src="sample.js"></script>

async や defer を指定した外部スクリプトは、その実行順序が保障されなくなるため、依存関係のあるライブラリに async や defer を指定することはできません。また、async や defer を指定した外部スクリプトでは、document.write() など、レンダリングに影響のある記述を用いてはなりません。

nonce は HTML5.1 で追加された属性で、Web ページ上に悪意を持って埋め込まれたスクリプトの実行を抑制するために用いられます。例えば、HTTP のレスポンスに下記の様な HTTP ヘッダが付与されていたとします。

Content-Security-Policy: script-src 'nonce-hUygTfgbgFcdRt5eDqpLfB6f==' 'strict-dynamic'

この場合、下記の HTML コードがある場合、正規のスクリプトは実行されますが、正当な nonce 値を持たない悪意のあるスクリプトは実行されません。

<article>
  ～悪意のある書き込み～
  <script>悪意のあるスクリプト</script>
  ～悪意のある書き込み～
</article>
<script nonce="hUygTfgbgFcdRt5eDqpLfB6f==">正規のスクリプト</script>

integrity 属性は、CDN などの中継サーバにおけるスクリプトの改竄をチェックするために用いられます。まず、スクリプトファイルの SHA-384 ハッシュ値を求めます。

$ cat sample.js | openssl dgst -sha384 -binary | openssl enc -base64 -A
DAPiLw1y9MaVlqwm9UKKTFNXrbtWUdW5Gwh8Zd8uWrccOb+zap1l8sjnv0QEfaGM

このハッシュ値を下記の様に指定します。

<script
  src="./sample.js"
  integrity="sha384-DAPiLw1y9MaVlqwm9UKKTFNXrbtWUdW5Gwh8Zd8uWrccOb+zap1l8sjnv0QEfaGM"
  crossorigin="anonymous"></script>

ブラウザは、integrity 属性が指定されている場合、ダウンロードしたスクリプトファイルのハッシュ値と integrity 属性の値を比較し、スクリプトの改竄が無いかチェックします。

ES6(ES2015/ECMAScript 2015) では、ES6 modules と呼ばれる機能が追加されました。PHP の require、Python の import などと同様、import / export で他のスクリプトファイルを読み込むことが可能です。ただし、この機能を用いると、ES6 modules に対応していないブラウザではエラーとなってしまいます。この問題を解決するために、type="module" と nomodule 属性を使用します。

ES6 modules 対応ブラウザのために、export / import を使用した sample-module.js を用意します。ES6 modules 未対応ブラウザのために、読み込むライブラリをすべて展開した sample-classic.js (効率が悪い)を用意します。これらを下記の様に読み込みます。ES6 modules 未対応ブラウザは nomodule 属性を無視し、sample-classic.js を読み込みますが、type="module" は未サポート言語のため sample-module.js は読み込みません。ES6 modules 対応ブラウザは nomodule 属性が指定された sample-classic.js は読み込まず、type="module" が指定された sample-module.js のみを読み込みます。

<script nomodule src="sample-classic.js"></script>
<script type="module" src="sample-module.js"></script>

language 属性には、使用する言語とそのバージョンを指定しするのに用いられていました。HTML5 には採用されておらず、非推奨の属性です。

• https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
• https://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-script-element
• https://www.w3.org/TR/html401/interact/scripts.html#edef-SCRIPT
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/script
• https://caniuse.com/mdn-html_elements_script