最終更新日

script要素

script要素は、ドキュメントに動的なスクリプトやデータブロックを含められるようにします。script要素はMetadataコンテンツまたはPhrasingコンテンツの記述箇所で使用できます。

動的なスクリプトを含める場合、スクリプトはscript要素内に記述するか、またはsrc属性を使って外部ファイルから読み込みます。スクリプトではなくデータブロックを含める場合、データはscript要素内に記述しなければなりません。データ形式は、type属性を使って指定できます。この場合、src属性の指定は不可です。

type属性は、スクリプトの記述言語またはデータ形式を、MIMEタイプで指定します。type属性の指定を省略した場合の既定値は「text/javascript」で、それ以外の場合には、type属性の指定が必須です。

src属性では、使用する外部スクリプトファイルのURLを指定します。src属性を指定した場合は、charset属性、async属性、defer属性も指定できます。

charset属性は、外部スクリプトファイルの文字コードを指定します。

async属性とdefer属性では、スクリプトの実行タイミングについて指定できます。async属性を指定すると、スクリプトは利用可能になった時点で非同期に実行されます。defer属性だけを指定すると、スクリプトはページの表示が完了したあとで実行されます。どちらの属性も指定していない場合、スクリプトは即座に取り込まれ実行されて、ページの表示がそれに続きます。async属性とdefer属性の両方を指定すると、async属性をサポートしていないブラウザではdefer属性のタイミングで実行されます。

なお、charset属性、async属性、defer属性は、src属性を指定した場合のみ使用できます。

HTML5での変更点
・language属性は廃止されました。スクリプトの記述言語を指定するにはtype属性を使います。
・async属性を指定できます。
カテゴリ タグの省略 親要素 子要素
Metadataコンテンツ
Flowコンテンツ
Phrasingコンテンツ
省略不可 headPhrasingコンテンツを子にできる要素 src属性なし:type属性の値による
src属性あり:スクリプトの説明
属性 説明
src URL 外部スクリプトファイルのURLを、相対または絶対パスで指定します。
async async 論理属性。指定した場合、スクリプトは利用可能になった時点で非同期に実行されます。
defer defer 論理属性。指定した場合、スクリプトはページの表示が完了したあとで実行されます。
type MIMEタイプ スクリプトのメディアタイプを指定。JavaScriptの場合は「text/javascript」です。
charset 文字コード 外部スクリプトファイルの文字コードを指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
    <script type="text/javascript" src="sample.js" charset="utf-8"></script>
  </head>
  <body>
    <p>バーガーショップ「マクドエイド」にようこそ!</p>
    <script type="text/javascript">
      document.write("マクドエイド表参道店がオープンしました!");
    </script>
  </body>
</html>
参考文献:W3C HTML5「4.3.1 The script element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。