script element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The script element allows authors to insert client-side scripts or data blocks in a document. These scripts may be designed to provide interactivity, calculate and display values or run animations, among other tasks.

Depending on the presence of the src attribute, the script element may be used to embed a piece of code inside the document or to reference an external scripts file that will be loaded separately. In the latter case, the URI of the referenced file must be used as content of the src attribute.

When will the scripts provided by this element be executed is something that depends on the presence of two attributes: defer and async. The presence of the first attribute indicates that the scripts should be executed once the document has been fully loaded. The presence of the async attribute instructs browsers to execute the scripts as soon as possible, but without blocking the document's load process. If none of these attributes is present, the scripts will be executed as soon as possible and the document loading wil be stopped unitl its execution is complete.

Examples

In the following example, we'll inser an embedded script with two functions that will change the style of the text of the element passed as paramenter. These functions are called by the events onmousenter and onmouseleave.

The functions provided in this example are outside the scope of this website and won't be explained in this document.

<p onmouseover="changeToItalic(this)" onmouseout="changeToNormal(this)">Kennedy was getting over his nervousness and falling into his wandering meditations again, when a sharp whistle pierced his ear.</p>
<script>
  function changeToItalic(element) {
    element.style.fontStyle='italic';
  }
  function changeToNormal(element) {
    element.style.fontStyle='normal';
  }
</script>

Kennedy was getting over his nervousness and falling into his wandering meditations again, when a sharp whistle pierced his ear.

In the next example, we'll link the element to an external file with a couple of functions that change the font weight of the element passed as parameter. This time, the src attribute will be present in the element and will provide the URI of the file containig the scripts.

<p onmouseover="weightToBold(this)" onmouseout="weightToNormal(this)">Joe let himself slide down by the rope; and, in a few moments, reappeared at his post; while the balloon, thus liberated, hung almost motionless in the air.</p>
<script src="script.js"></script>

Joe let himself slide down by the rope; and, in a few moments, reappeared at his post; while the balloon, thus liberated, hung almost motionless in the air.

Attributes

Specific attributes

src

The URI of the external script resource to be loaded.

Scripts can be included through this method only when the type attribute has the values "text/javascript" or "text/javascript".

The scripts in the file referenced by this attribute must be presented in the language described by the type attribute.

Example

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

type

The type of content the script block is supposed to be holding. It can take three types of values:

  • text/javascript: the script is a classic script and it's affected by the attributes charset, async, and defer. This is the default value and authors are encouraged to directly ommit the attribute.
  • module: the script is a module script and it's not affected by the attributes charset and defer.
  • Any other valid Internet media type: the script is a data block and therefore it's not processed and it's not affected by any other attribute. This type of script must be declared in-situ (it can be retirieved from an external resource through the src attribute).

Example

<script type="text/javascript">
  function foo() {
    return bar;
  }
</script>

nomodule

A boolean attribute that indicates the script shouldn't be executed in browsers that have support for module scripts. If the attribute is present, browsers with support for module scripts won't execute this script.

The nomodule attribute can be useful as a complementary way of providing the functionality of module scripts in browsers that don't support them.

The presence of this attribute in module scripts is fobidden and will be completely ignored by browsers.

Example

// Single script file for browsers not supporting module scripts (will be ignored in browsers supporting module scripts)
<script src="../single-script-file.js" nomodule></script>

async

A boolean value indicating if the scripts provided in the src attribute of this element should be loaded asynchronously. If this attribute takes the value "async" or the empty string ("") or if it's just present, the script will be fetched in parallel to document parsing and evaluated as soon as it is available (potentially before document parsing is complete).

This attribute can only be declared for classic and module scripts. This is, when the type attribute is absent or has the values "text/javascript" and "module".

This attribute can be declared toghether with the defer attribute, to cause legacy browsers, that only support defer, to fall back to the defer method instead of the blocking the page load (which is the default behavior).

This attribute can't be declared in the absence of the src attribute, or in other words, its presence is only valid when the element points to an external script.

Example

<script src="../heavyscripts.js" async></script>

defer

A boolean value indicating if the scripts provided in the src attribute of this element should be executed once the page has been fully loaded. If this attribute takes the value "defer" or the empty string ("") or if it's just present, the script will be fetched in parallel to document parsing and evaluated only after the document parsing is complete.

This attribute can only be declared for classic scripts. This is, when the type attribute is absent or has the value "text/javascript".

This attribute can be declared toghether with the async attribute, to cause legacy browsers, that only support defer, to fall back to the defer method instead of the blocking the page load (which is the default behavior).

This attribute can't be declared in the absence of the src attribute, or in other words, its presence is only valid when the element points to an external script.

Example

<script src="../heavyscripts.js" defer></script>

crossorigin

An enumerated value indicating if the request made to the external server should present CORS credentials or not. This attribute is useful when embedding scripts located in other servers that support cross-origin access, to allow a richer error reporting. The two possible values are (case-insensitive):

  • anonymous: CORS requests for the element will have the "omit credentials" flag set.
  • use-credentials: CORS requests for the element won't have the "omit credentials" flag set.

Example

<script src="http://www.otherwebsite.com/scripts.js" crossorigin="use-credentials"></script>

integrity

A cryptographic representation of the linked script resource that allows browsers to check that the resource retrieved wasn't tampered.

This attribute must only be declared when the scr attribute is present. In any other situation its use will be invalid.

Example

<script src="functions.js" integrity="sha384-aHR0cDovL2h0bWxxdWljay5jb20vZnVuY3Rpb25zLmpzDQo="></script>

referrerpolicy

Sets the referrer policy used when fetching the script, as well as any scripts imported from it. It may contain any of the following values:

  • no-referrer: No information about the referrer is sent in all requests.
  • no-referrer-when-downgrade: A full URL is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • same-origin: A full URL is sent only in requests made in the same origin.
  • origin: A URL composed by protocol, host and port is sent in all requests.
  • strict-origin: A URL composed by protocol, host and port is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests.
  • strict-origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests, only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • unsafe-url: A full URL is sent in all request.

Note: When the empty string is specified, the value no-referrer is assumed.

Example

<script src="http://www.anothersite.com/funcs.js" referrerpolicy="unsafe-url"></script>

charset

The character encoding used by the script resource provided in the src attribute.

This attribute has become obsolete in HTML5, being that all scripts are required to be provided and interpreted as UTF-8.

Example

<script src="../menuscripts.js" charset="utf-8"></script>

language

The scripting language used by the program, as a language identifier. Language identifier values aren't standard.

Example

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

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.