<script></script>

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所
内容 src属性がある場合:空、またはスクリプトの説明(コメント) / src属性がない場合:JavaScriptのコード、またはデータブロック

script要素は、文書内にJavaScript、またはデータブロックを埋め込むための要素です。この要素は、head要素内とbody要素内のどちらにも配置することができます。

外部のスクリプトファイルを読み込むか、script要素内にスクリプトを記述して使用します。


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


<script>

ここにスクリプトを記述します

</script>

属性
任意属性
src="" 外部スクリプトの指定 URL 読み込むスクリプトファイルのURL
type="" スクリプトのタイプ text/javascript スクリプトが一般的なJavaScriptであることを示す(既定値)
module スクリプトがJavaScriptモジュールであることを示す
importmap スクリプトがJSONを含むインポートマップであることを示す
その他のMIMEタイプ スクリプトがデータブロックであることを示す
crossorigin="" オリジンにあるリソースの処理方法 anonymous 認証情報を使用せずにCORSリクエストを送信
use-credentials 認証情報を使用してCORSリクエストを送信
anonymous と同じ
async 利用可能な時点で実行 async 値は省略可能、構文解析と並行して読み込み、スクリプトが利用可能になった時点で実行する
defer 読み込み完了後に実行 defer 値は省略可能、構文解析と並行して読み込み、解析が完了した時点でスクリプトを実行する
referrerpolicy="" [+]リソースを読み込む際のリファラーポリシー リファラーポリシー 既定値は strict-origin-when-cross-origin
fetchpriority="" [+]外部スクリプトを取得する際の相対的な優先度 high 他の外部スクリプトと比較して取得の優先度が高いことを示す
low 他の外部スクリプトと比較して取得の優先度が低いことを示す
auto 取得の優先度は自動的に決定(既定値)
integrity="" [+]サブリソースの改ざんの有無を確認 文字列 Base64でエンコードされた文字列
nomodule [+]スクリプトを実行しない nomodule 値は省略可能、モジュールスクリプトに対応したブラウザではスクリプトを実行しない
blocking="" [+]外部リソースの読み込み中にブロックする処理 render 文書のレンダリングをブロック ※値(ブロッキングトークン)は追加される可能性がある
  • 一般的なJavaScriptの場合は、src属性がある場合に限り、async属性defer属性を指定することができます。
  • JavaScriptモジュールスクリプトの場合は、defer属性nomodule属性は指定することができません。
  • インポートマップの場合はインラインでのみ利用が可能で、src属性crossorigin属性referrerpolicy属性async属性defer属性integrity属性nomodule属性は指定することができません。
  • データブロックの場合はインラインで埋め込む必要があり、src属性crossorigin属性referrerpolicy属性fetchpriority属性async属性defer属性integrity属性nomodule属性は指定することができません。
  • crossorigin属性の値を省略した場合は anonymous になります。属性そのものを省略した場合はCORSリクエストを行いません。
  • integrity属性は、src属性がある場合に指定することができます。
  • この要素に定義されていたnonce属性は、グローバル属性として再定義されました。

type属性referrerpolicy属性async属性defer属性の詳細については、下記のページを参考にしてください。

外部スクリプトの読み込み

外部スクリプトを読み込む場合は、src属性の値に外部スクリプトファイルのURLを指定します。具体的には次のような記述になります。

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

src属性が指定されたscript要素の内容には、コメント(/**/ または //)を入れることができます。このコメント部分には、外部スクリプトに関する説明著作権情報などを記載しておくことができます。

<script src="example.js">
/*
合計金額を計算するJavaScript
作成日:2022年5月26日
*/
// Copyright (C) 2022 TAG index
</script>
  • /**/ は1行または複数行、// は1行のコメントとして扱われます。

script要素内にスクリプトを記述

script要素内にスクリプトを記述する場合は、src属性を指定せずに次のように記述します。

<script>
ここにスクリプトを記述します
</script>

nomodule属性について

nomodule属性は、モジュールスクリプトに対応しているブラウザでは、スクリプトを実行しないことを指定します。

この属性を指定することで、ブラウザにより実行するスクリプトを振り分けることができます。

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

上記のように指定しておくと、モジュールスクリプトに対応しているブラウザでは module.js が読み込まれ、nomodule が指定された classic.js は無視されます。

モジュールスクリプトに未対応のブラウザでは、type="module" が認識できないため module.js は無視され、nomodule も認識できないため classic.js が読み込まれることになります。

旧HTMLからの変更点
  • HTML5:language属性が廃止され、async属性とcrossorigin属性が追加されました。
  • HTML5:スクリプトの言語がJavaScriptの場合、type属性が省略可能になりました。(既定値が text/javascript になったため)
  • HTML5.1:nonce属性が追加されました。
  • HTML LS:charset属性が廃止され、nonce属性がグローバル属性に移り、referrerpolicy属性、integrity属性、nomodule属性、blocking属性が追加されました。
  • HTML LS:type属性の値に importmap が追加されました。[2023/04/20]
  • HTML LS:fetchpriority属性が追加されました。[2023/04/20]

使用例

外部スクリプトを読み込む例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

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

</head>
<body>

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

</body>
</html>

script要素内にスクリプトを記述した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<script>

function test(){

	alert('アラートのテスト');

}

</script>

</head>
<body>

<script>

document.write("サンプルテキスト");

</script>

</body>
</html>