HTML の <script> 要素は、実行できるコードを埋め込んだり参照したりするために使用されます。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語等の他の言語にも使用することができます。

コンテンツカテゴリー メタデータコンテンツフローコンテンツ記述コンテンツ
許可されている内容 text/javascript などの動的スクリプト
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 メタデータコンテンツを受け入れるすべての要素、または記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール なし
DOM インターフェイス HTMLScriptElement

属性

この要素にはグローバル属性があります。

async HTML5
これは論理属性で、スクリプトを可能であれば非同期で実行すべきであることを示します。

この属性は src 属性がない場合(つまり、インラインスクリプトの場合)に使用してはいけません。そのような場合は効果がありません。

ブラウザーはふつう、最も悪いシナリオを想定し、 HTML の解釈中は同期的にスクリプトを読み込みます (つまり、 async=false です)。

(document.createElement を使用して) 動的に挿入されたスクリプトは、既定で非同期に実行されますので、同期的に実行する (すなわち読み込まれた順に実行する) スクリプトには async=false を設定してください。

ブラウザーの対応状況についてはブラウザーの対応をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。

crossorigin
通常の script 要素は標準の CORS チェックに通らないスクリプトに対して、 window.onerror に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは CORS 設定属性をご覧ください。
defer
この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。
defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 DOMContentLoaded イベントの発生が抑制されます。

この属性は、 src 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。

動的に挿入されたスクリプトで同様の効果を得るには、代わりに async=false を使用してください。 defer 属性の付いたスクリプトは文書内に出現する順で実行されます。
integrity
この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。 Subresource Integrity をご覧ください。
nomodule
この論理属性は、 ES2015 モジュールに対応するブラウザーでスクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードをサポートしない古いブラウザー向けのフォールバックスクリプトを提供するために使用できます。
nonce
script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるための暗号ノンス(ワンタイム番号)です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。
src
この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。

script 要素に src 属性が指定した場合は、自身のタグ中に埋め込みスクリプトを持たせないでください。

text
textContent 属性と同じように、この属性は要素のテキストコンテンツを設定します。textContent 属性との違いは、ノードが DOM に挿入された後に実行可能なコードとして評価されることです。
type

スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。

  • 省略または JavaScript の MIME タイプ: HTML5 に準拠するブラウザーでは、これはスクリプトが JavaScript であることを示します。HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (src 属性で) インポートされたコードのスクリプト言語を指定していました。JavaScript の MIME タイプは仕様書に掲載されています
  • module: HTML5 HTML5 に準拠するブラウザーは、コードを JavaScript モジュールとして扱います。スクリプトの処理は、charset および defer 属性の影響を受けません。module の仕様に関する情報について、ES6 in Depth: Modules をご覧ください。 module キーワードが使用されていると、コードは異なるふるまいをするかもしれません。
  • その他の値: このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。src 属性は無視されます。

メモ: Firefox では <script> 要素の type 属性の中に標準外の version 引数を含めることで(例えば type="application/javascript;version=1.8")、内部の JavaScript のバージョンを指定することができました。これは Firefox 59 で削除されました(バグ 1428745 を参照)。

非推奨属性

language
type 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 type 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに type 属性を使用してください。

メモ

async 属性または defer 属性を持たないスクリプトは、インラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。

スクリプトは text/javascript の MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像 (image/*)・動画 (video/*)・音声 (audio/*)・text/csv のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、 load イベントではなく error イベントが発生します。

基本

これらの例は HTML4 と HTML5 の両方で、 <script> 要素を使用してスクリプトをインポートする方法を紹介します。

<!-- HTML4 および (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

モジュールフォールバック

type 属性でモジュールに対応するブラウザーは、 nomodule 属性の付いたスクリプトを無視します。これによって、モジュールを非対応のブラウザーのためのフォールバック付きで使用する方法があります。

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

仕様書

仕様書 状態 備考
HTML Living Standard
<script> の定義
現行の標準 module タイプを追加
HTML5
<script> の定義
勧告  
HTML 4.01 Specification
<script> の定義
勧告  
Subresource Integrity
<script> の定義
勧告 integrity 属性を追加

ブラウザーの対応

以下の情報は MDN の Github (https://github.com/mdn/browser-compat-data) から抽出されたものです。

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり11 あり あり あり
async1 あり1 あり あり あり
crossorigin30 あり13 なし12 あり2
defer あり あり3.53104 なし あり
integrity45 なし43 なし ? なし5
language1 あり1 あり あり あり
nomodule あり なし

60

55 — 606

なし なし なし
src1 あり1 あり あり あり
text1 あり1 あり あり あり
type1 あり1 あり あり あり
type.module6116

60

54 — 607

なし4810.1
type: The version parameter of the type attribute なし なし あり — 59 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
async あり あり あり4 あり あり あり
crossorigin あり あり ?14 ? ? あり
defer あり あり あり4 ? あり あり
integrity4545 なし43 ? なし5.0
language あり あり あり4 あり あり あり
nomodule あり あり なし

60

55 — 606

? なし あり
src あり あり あり4 あり あり あり
text あり あり あり4 あり あり あり
type あり あり あり4 あり あり あり
type.module616116

60

54 — 607

4810.3 なし
type: The version parameter of the type attribute なし なし なし あり — 59 なし なし なし

1. Starting in Firefox 4, inserting <script> elements that have been created by calling document.createElement("script") no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set .async=false on them.

2. The crossorigin attribute was implemented in WebKit in WebKit bug 81438.

3. Since Firefox 3.6, the defer attribute is ignored on scripts that don't have the src attribute. However, in Firefox 3.5 even inline scripts are deferred if the defer attribute is set.

4. In versions prior to Internet Explorer 10, it implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.

5. WebKit bug 148363 tracks WebKit implementation of Subresource Integrity (which includes the integrity attribute).

6. From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

互換性のメモ

async 属性に対応していない古いブラウザーでは、パーサーによって挿入されたスクリプトはパーサーをブロックします。スクリプトによって挿入されたスクリプトは、 IE および WebKit では非同期的に実行されますが、 Opera およびバージョン4より前の Firefox では同期的に実行されます。 Firefox 4 では、スクリプトが生成したスクリプトの async DOM プロパティの既定値が true であるため、既定の動作が IE や WebKit の動作に一致します。

document.createElement("script").asynctrue と評価されるブラウザー(Firefox 4 など)で、スクリプトによって挿入された外部スクリプトを挿入順に実行することを要求するには、順序を制御したいスクリプトに対して .async=false を設定します。

非同期スクリプトから document.write() を呼び出さないでください。 Firefox 3.6 では document.write() を呼び出すと予期せぬ影響をもたらします。Firefox 4 では async スクリプトから document.write() を呼び出しても効果がありません(エラーコンソールに警告を出力することを除く)。

関連情報