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

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

属性

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

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

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

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

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

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

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

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

動的に挿入されたスクリプトで同様の効果を得るには、代わりに async=false を使用してください。 defer 属性の付いたスクリプトは文書内に出現する順で実行されます。
importance
リソースの相対的な重要性を示します。優先度のヒントは以下の値を使用して委任されます。

auto: 設定なしを表します。ブラウザーはリソースの優先度を決めるために、独自の経験則を使用するかもしれません。

high: リソースが高い優先度のものであることをブラウザーに示します。

low: リソースが低い優先度のものであることをブラウザーに示します。

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="text/javascript;version=1.8")、内部の JavaScript のバージョンを指定することができました。これは Firefox 59 で削除されました (バグ 1428745 を参照)。

非推奨属性

charset
存在する場合、値は ASCII で大文字小文字を区別せずに "utf-8" と一致する文字列でなければなりません。 charset 属性は、文書が UTF-8 でなければならないこと、及び script 要素が文書から文字エンコーディングを継承することから、指定する必要はありません。
language
type 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 type 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに type 属性を使用してください。

メモ

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

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

基本

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

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

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

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

type 属性で module の値に対応しているブラウザーは、 nomodule 属性の付いたスクリプトを無視します。これによって、モジュールスクリプトを提供しつつ、非対応のブラウザーの場合は nomodule でマークされたフォールバックスクリプトを提供することもできます。

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

仕様書

仕様書 状態 備考
HTML Living Standard
<script> の定義
現行の標準 charset 属性を削除
Unknown
<script> の定義
不明 charset 属性を削除
HTML 5.2
<script> の定義
勧告 module type を追加
HTML 5.1
<script> の定義
勧告
HTML5
<script> の定義
勧告
HTML 4.01 Specification
<script> の定義
勧告
Subresource Integrity
<script> の定義
勧告 integrity 属性を追加

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1
補足
完全対応 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.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
asyncChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
crossoriginChrome 完全対応 30Edge 完全対応 ありFirefox 完全対応 13IE 未対応 なしOpera 完全対応 12Safari 完全対応 あり
補足
完全対応 あり
補足
補足 The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 14Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
deferChrome 完全対応 あり
補足
完全対応 あり
補足
補足 Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Edge 完全対応 ありFirefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 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.
IE 完全対応 10
補足
完全対応 10
補足
補足 In versions prior to Internet Explorer 10, it implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.
Opera 未対応 なしSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
integrityChrome 完全対応 45Edge 部分対応 17Firefox 完全対応 43IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Edge Mobile 未対応 なしFirefox Android 完全対応 43Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
language
非推奨非標準
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nomodule
実験的
Chrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 60
完全対応 60
未対応 55 — 60
無効
無効 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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 60
完全対応 60
未対応 55 — 60
無効
無効 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.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
srcChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
textChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
type.moduleChrome 完全対応 61Edge 完全対応 16Firefox 完全対応 60
完全対応 60
未対応 54 — 60
無効
無効 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.
IE 未対応 なしOpera 完全対応 48Safari 完全対応 10.1WebView Android 完全対応 61Chrome Android 完全対応 61Edge Mobile 完全対応 16Firefox Android 完全対応 60
完全対応 60
未対応 54 — 60
無効
無効 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.
Opera Android 完全対応 48Safari iOS 完全対応 10.3Samsung Internet Android 未対応 なし
type: The version parameter of the type attribute
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 59IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 59Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

互換性のメモ

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() を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。

関連情報