<script>: The HTML Script element

The HTML <script> element is used to embed executable code or data; this is typically used to embed or reference JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

Attributes

async

For classic scripts, if the async attribute is present, the classic script will be retrieved alongside the analysis and evaluated as soon as it is available.

For module scripts, if the async attribute is present, the scripts and all their dependencies will be executed in the defer queue, then fetched in parallel with the parsing and evaluated as soon as they are available.

This attribute allows the elimination of JavaScript that blocks the parser where the browser should load and evaluate scripts before continuing parsing. defer has a similar effect in this case.

This is a Boolean attribute: the presence of a Boolean attribute on an element represents the true value and the absence of the attribute represents the false value.

crossorigin

Regular script elements pass minimal information to window.onerror for scripts that fail standard CORS checks . To enable error logging for sites that use a separate domain for static support, use this attribute.

defer

This Boolean attribute is set to tell a browser that the script should be executed after the document has been parsed, but before DOMContentLoaded is triggered.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script loads and evaluation is complete.

Scripts with the defer attribute will run in the order they appear in the document.

This attribute allows the elimination of JavaScript that blocks the parser where the browser should load and evaluate scripts before continuing parsing. async has a similar effect in this case.

fetchpriority

Provides a hint about the relative priority to use when retrieving an external script. Allowed values:

high

Report recovery as high priority compared to other external scripts..

low

Report low priority recovery compared to other external scripts.

auto

Default: Reports automatic determination of recovery priority over other external scripts.

integrity

This attribute contains inline metadata that a user agent can use to verify that a retrieved resource was delivered without unexpected manipulations.

nomodule

This Boolean attribute is set to indicate that the script should not run in browsers that support ES2015 modules: in fact, it can be used to serve fallback scripts to older browsers that don't support modular JavaScript code.

nonce

A cryptographic nonce (number used once) to allow scripts in a Content-Security-Policy script-src. The server must generate a unique nonce value each time it broadcasts a policy. It is critical to provide a nonce that cannot be guessed since bypassing a resource's policy is otherwise trivial.

referrerpolicy

Indicates which referrer to send when retrieving the script or resources retrieved by the script:

  • no-referrer: The Referer header will not be sent.
  • no-referrer-when-downgrade: The Referrer header will not be sent to origins without TLS ( HTTPS ).
  • origin: The sent referrer will be limited to the origin of the referring page: its schema, host and port.
  • origin-when-cross-origin: Referrer sent to other origins will be restricted to schema, host, and port. Same-origin navigations will still include the route.
  • same-origin: A referrer for the same origin will be sent, but cross-origin requests will not contain referrer information.
  • strict-origin: Send the document origin as a referrer only when the protocol security level remains the same (HTTPS→HTTPS), but do not send it to a less secure destination (HTTPS→HTTP).
  • strict-origin-when-cross-origin (default): Send a full URL when making a same-origin request, send the origin only when the protocol security level remains the same (HTTPS→HTTPS), and do not send no header to a less secure destination (HTTPS→HTTP).
  • unsafe-url: The referrer will include the source and path (but not the snippet, password, or username). This value is insecure, because it leaks origins and paths from TLS-protected resources to insecure origins.

src

This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.

type

This attribute indicates the type of script represented. The value of this attribute will be in one of the following categories:

  • Omitted or a JavaScript MIME type: Indicates that the script is JavaScript. The HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In previous browsers, this identified the scripting language of embedded or imported code (via the attribute).
  • module: Causes the code to be treated as a JavaScript module. Processing of script content is not affected by the charset and defer attributes. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin retrieval.
  • Any other value: Embedded content is treated as a block of data that will not be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The src attribute will be ignored.

Deprecated attributes

charset

If present, its value must be a case-insensitive ASCII match for "utf-8". You do not need to specify the charset attribute, because documents must use UTF-8 and the script element inherits the character encoding from the document.

language

Like the type attribute, this attribute identifies the scripting language in use. Unlike the type attribute, however, the possible values of this attribute have never been standardized. The type attribute should be used instead.

Examples

Basic usage

These examples show how to import an (external) script using the <script> element.

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

And the following examples show how to insert a script (inline) inside the <script> element.

<script>
  alert("Helo World");
</script>

Reserve form

Browsers that support the module value for the type attribute ignore any script with a nomodule attribute. This allows you to use module scripts while also providing flagged fallback nomodule scripts for browsers they don't support.

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