References

Beginner-friendly references for web development, with live, editable examples.

The HTML <script> tag

Element All modern browsers Updated
Quick answer

The HTML <script> element embeds or links executable JavaScript. Load external code with src, choose loading with async or defer, and use type="module" for ES modules.

Overview

The <script> element runs JavaScript — either inline between its tags or, preferably, from an external file via the src attribute. It is the element that brings interactivity to a page.

Placement and loading strategy matter for performance. A plain <script> in the <head> blocks HTML parsing while it downloads and runs, which delays the page. Control that with async (run as soon as it is ready, order not guaranteed) or defer (run in order after the document is parsed — the safe default for most scripts). Use type="module" for modern ES modules, which are deferred by default and support import.

For third-party scripts, protect against tampering with integrity plus crossorigin (Subresource Integrity), and under a strict Content-Security-Policy, allow an inline script with a matching nonce.

Syntax

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

Attributes

The <script> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
async A boolean attribute — present or absent. Loads and runs a script asynchronously.
blocking render Marks a resource as render-blocking.
crossorigin anonymous (default when present) use-credentials Sets the CORS mode for fetching the resource.
defer A boolean attribute — present or absent. Defers script execution until after parsing.
integrity One or more hashes prefixed by algorithm, e.g. sha384-…. Verifies a resource against a hash (SRI).
nomodule A boolean attribute — present or absent. Provides a fallback script for legacy browsers.
referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin (default) unsafe-url Controls the Referer header sent for the request.
src A URL pointing to the resource. Specifies the URL of an embedded resource.
type A MIME type such as text/css or image/webp — or module on a <script>. Specifies the MIME type of a resource.

Example

Live example 
<script>
  document.write('Hello from a script!');
</script>

Best practices

  • Load scripts from an external file with src rather than inlining them where possible.
  • Use defer (or type="module") so scripts do not block HTML parsing.
  • Protect third-party scripts with integrity and crossorigin (Subresource Integrity).
  • Allow a needed inline script under a strict CSP with a matching nonce.

Frequently asked questions

What is the script element for?
To embed or reference executable JavaScript, either inline or from an external file via src.
What is the difference between async and defer?
async runs the script as soon as it downloads, in no guaranteed order; defer runs scripts in order after the document is parsed. defer is the safe default.
How do I stop a script from blocking the page?
Add defer (or use type="module"), so the browser keeps parsing the HTML while the script downloads.
What is type="module"?
It marks the script as an ES module, which supports import/export and is deferred by default.
samp search