<script type=""></script>

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

script要素に type="" を追加すると、スクリプトのタイプを指定することができます。


<script type="module"></script>
属性 値
任意属性
type="" スクリプトのタイプ text/javascript スクリプトが一般的なJavaScriptであることを示す（既定値）
module スクリプトがJavaScriptモジュールであることを示す
importmap スクリプトがJSONを含むインポートマップであることを示す
その他のMIMEタイプ スクリプトがデータブロックであることを示す

type属性の状態により、埋め込まれた内容の扱いが以下のように変わります。

"text/javascript" を指定、空文字列を指定、属性を省略

値に text/javascript を指定、または空文字列を指定、あるいはtype属性を省略すると、埋め込まれた内容が一般的なJavaScriptとして扱われます。

  • 一般的なJavaScriptの場合は、type属性を省略することが推奨されています。
<script type="text/javascript"></script>

<script type=""></script>

<script></script>
"module" を指定

値に module を指定すると、埋め込まれた内容がJavaScriptモジュールスクリプトとして扱われます。

<script type="module"></script>
"importmap" を指定

値に importmap を指定すると、埋め込まれた内容がJSONを含むインポートマップとして扱われます。

<script type="importmap"></script>
その他のMIMEタイプを指定

text/javascript 以外のMIMEタイプを指定すると、埋め込まれた内容がデータブロックとして扱われます。

<script type="application/ld+json"></script>

タイプ別の制限事項

スクリプトのタイプにより、指定できる属性などが異なります。

一般的なJavaScriptの場合
  • src属性がある場合に限り、async属性とdefer属性を指定することができます。
JavaScriptモジュールスクリプトの場合
  • defer属性とnomodule属性は指定することができません。
  • src属性の有無にかかわらず、async属性を指定することができます。
インポートマップの場合
  • インラインでのみ利用が可能です。
  • src属性、crossorigin属性、referrerpolicy属性、async属性、defer属性、integrity属性、nomodule属性は指定することができません。
データブロックの場合
  • 内容はインラインで埋め込む必要があります。
  • src属性、crossorigin属性、referrerpolicy属性、fetchpriority属性、async属性、defer属性、integrity属性、nomodule属性は指定することができません。

使用例

2種類の外部スクリプトを読み込む例

<!DOCTYPE html>
<html>
<head>

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

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

</head>
<body>



</body>
</html>