目次に戻る

script要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • src属性がない場合は、type属性で指定するスクリプト言語等のコードテキスト。
  • src属性がある場合は、空であるか、スクリプトの仕様に合致するテキスト（type属性で指定するスクリプト言語におけるコメント文など）かのいずれか。
  • いずれにしても書ける文字等に制限がある（当該制限を満たす最も簡単で安全な方法は、<!--を\x3c!--として、<scriptを\x3cscriptとして、</scriptを\x3c/scriptとして、常にエスケープすることである）。
属性
  • グローバル属性
  • src→外部スクリプトのリソースを示すURL
  • async→ブーリアン属性。指定されれば、スクリプトは利用可能になった時点で非同期的に実行される。
  • defer→ブーリアン属性。指定されれば、スクリプトはHTML文書全体の解釈が終了したときに実行される。
  • blocking→値は下記のとおり。半角スペース区切りで複数指定可（現状一種類の値しか指定できないので意味はない）。読み込む際に何を阻止するかを指定する。
    • render→レンダリングを阻止する。この状態は、スクリプトで解除処理をするか、閲覧文脈への接続が切断されるかのいずれかによって解除される。
  • crossorigin→値は下記のとおりで、空も可。空の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン（→別ドメインなど）からの読み込みに対して、ユーザー認証情報の要否を指定する。
    • anonymous→ユーザー認証情報を求めない。
    • use-credentials→ユーザー認証情報を求める。
  • integrity→サブリソースの改竄検証のためのハッシュ値。詳細は、Subresource Integrityを参照。
  • nomodule→ブーリアン属性。指定されれば、モジュールスクリプトをサポートするユーザーエージェントで当該スクリプトが実行されないようにする。
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrer→リファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgrade→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • origin→ドメイン部分のみをリファラー情報として送信する（例：「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信）。
    • strict-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-url→リファラー用に削った全部情報を送信する。
  • fetchpriority→値は下記とおり。デフォルトは、auto。同種リソース間におけるキャッシュ事前取得の優先度を指定。
    • high→優先度高。
    • low→優先度低。
    • auto→優先度自動。
  • type→module（ジャバスクリプトモジュールスクリプト）、importmap（インポートマップ指定）、又は、スクリプト・データブロックの言語・形式を指定するMIME type。デフォルトは、text/javascript。クラシックスクリプト（＝ジャバスクリプト類）を示すもの（該当するものは下記のとおり）以外のMIME typeを指定した場合は、データブロックと解釈される。なお、この属性値にクラシックスクリプト（＝ジャバスクリプト類）を示すMIME type（該当するものは下記のとおり）を指定することとなってしまう場合は、この属性は省略すべきである。
    • application/ecmascript
    • application/javascript
    • application/x-ecmascript
    • application/x-javascript
    • text/ecmascript
    • text/javascript
    • text/javascript1.0
    • text/javascript1.1
    • text/javascript1.2
    • text/javascript1.3
    • text/javascript1.4
    • text/javascript1.5
    • text/jscript
    • text/livescript
    • text/x-ecmascript
    • text/x-javascript
  • src属性がない場合は、async、defer、integrityの各属性は指定してはならない。
  • type属性値がmoduleの場合は、defer、nomoduleの各属性は指定してはならない。
  • type属性値がimportmapの場合、又は、データブロックである場合は、crossorigin、src、async、defer、integrity、nomodule、referrerpolicyの各属性は指定してはならない。
  • type属性値がimportmapのscript要素が、同一HTML文書内に複数あってはならない。
  • type属性値がデータブロックである場合は、fetchpriority属性は指定してはならない。
  • async属性とdefer属性の両方が指定されていた場合は、async属性の効果が優先。ただし、asyc属性をサポートしないブラウザに対しては、defer属性の効果が発動する。
  • これらの属性をスクリプトで操作しても何も起こらない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
視覚系ブラウザのデフォルトとして期待されるCSS

  script {display: none;}
準拠チェッカーに対する規定
  • script要素に廃止されたlanguage属性が指定されていても、その属性値がJavaScriptであり、かつ、type属性が指定されてないか又はtype属性値がtext/javascriptである限り、エラーとはせずに警告にとどめることが許容される。
  • script要素に廃止されたcharset属性が指定されていても、その属性値がutf-8である場合に限り、エラーとはせずに警告にとどめることが許容される。
  • script要素に省略すべきtype属性が指定されていても、その属性値がジャバスクリプト類を示すMIME typeである場合に限り、エラーとはせずに警告にとどめることが許容される。
ユーザーエージェントに対する特記事項
  • データブロック以外の場合で、かつ、src属性が指定されている場合においては、廃止されたcharset属性が指定されたなら、当該charset属性は読み込むスクリプトの文字エンコーディングを判定するものとして作用する。
  • モジュールスクリプトがCSSモジュールスクリプトとして解析できた場合は、解析済みのCSSとして取り扱う。
  • モジュールスクリプトがJSONモジュールスクリプトとして解析できた場合は、解析済みのJSONとして取り扱う。
意味・用法

この要素は、HTML文書に動的スクリプトや（スクリプトで利用されるだろう）データブロックを組み込むことを、著者に許す。

閲覧者に対しては、内容は表示されない。

モジュールスクリプトの種類には、ジャバスクリプトモジュールスクリプト、JSONモジュールスクリプト、CSSモジュールスクリプト、WebAssemblyモジュールスクリプトがある。

スクリプトは、外部スクリプトのリソースをsrc属性で指定して読み込むか、script要素の内容にコードテキストを書き込むかのいずれか。スクリプトの種類ごとの可否は下記のとおり。

  • クラシックスクリプト→src属性による外部スクリプトのリソースの読み込みは、可。script要素の内容へのコードテキストの書き込みは、可。
  • ジャバスクリプトモジュールスクリプト→src属性による外部スクリプトのリソースの読み込みは、可。script要素の内容へのコードテキストの書き込みは、可。
  • データブロック→src属性による外部スクリプトのリソースの読み込みは、不可。script要素の内容へのコードテキストの書き込みは、可。
  • インポートマップ指定→src属性による外部スクリプトのリソースの読み込みは、不可。script要素の内容へのコードテキストの書き込みは、可。

アクセシビリティ関連

私見・補足

一般的なHTML文書では、スクリプトが機能しなくても基本的な情報は読めるようにしておくのが基本である。

コードテキストを内容とする場合は、style要素によるスタイルシートの埋め込みと同様に、コードテキストをコメントの中に入れるという方法やコードテキストをCDATAセクションとする方法もあるが、問題点も同様である。

CSSモジュールスクリプト、JSONモジュールスクリプト、WebAssemblyモジュールスクリプト→仕様上は、HTML文書作成者には、script要素によって直接的に読み込んだり書き込んだりする方法は与えられてない。ただし、script要素によるスクリプトの中で、他のモジュールスクリプトを読み込む構文を記述するときに読み込み対象に指定する形で間接的に読み込める。