HTML Scripts
In HTML, a script is a small, embedded program that can add interactivity to your website. Learn How to Add Scripts and How to Trigger Scripts with W3docs.
A script is a small piece of code embedded in web pages to make them dynamic and interactive. For example, with scripts, you can create a pop-up box message, a dropdown menu, or validate a form before it is submitted. JavaScript is the most common scripting language used on websites.
This page covers how to add JavaScript to an HTML document, where to place the <script> element, how to control when it runs with defer and async, and how to provide a fallback for users without JavaScript. For the full list of <script> attributes, see the dedicated <script> tag reference.
How to Add Scripts
The <script> element either holds inline code or references an external file. There are two ways to use it:
1. Inline script — write the code directly between the opening and closing tags:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. External script — point the src attribute at a .js file. The element must be empty (no code between the tags):
<script src="scripts.js"></script>If you need the same code on many web pages, put it in a separate .js file and reference it with src. External files are cached by the browser, keep your HTML clean, and let you reuse one script across the whole site.
Scripts are often placed in the <head> or just before the closing </body> tag, but a <script> can appear anywhere in the document. Placement matters because of how the browser parses the page — see Where to place a script below.
Inline DOM manipulation example
An inline script can read and change the page using the DOM. The example below finds a paragraph by its id and rewrites its text when the script runs:
Inline Script — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Because the <script> comes after the <p>, the element already exists in the DOM when the script runs, so getElementById finds it. If the script ran before the element, it would get null.
Note: In HTML5, the type attribute is optional (defaulting to text/javascript) and is considered deprecated for JavaScript scripts.
defer vs async
When a script is in the <head>, the browser normally stops parsing the HTML, downloads the script, runs it, and only then continues. On large scripts this blocks rendering and makes the page feel slow. The defer and async attributes (which apply only to external scripts with a src) fix this by downloading the script in parallel with HTML parsing — they differ in when the script runs.
| Attribute | Download | Execution timing | Keeps source order? |
|---|---|---|---|
| (none) | Blocks parsing while downloading | Immediately, blocking parsing | Yes |
defer | In parallel with parsing | After the HTML is fully parsed, just before DOMContentLoaded | Yes |
async | In parallel with parsing | As soon as the download finishes, pausing parsing at that moment | No — whichever loads first runs first |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Use defer for scripts that depend on the DOM or on each other (most app code). Use async for independent scripts that don't rely on anything else, such as analytics or ad tags.
Where to place a script
Where you put a <script> decides whether the page elements exist when it runs.
A script placed right before the closing </body> runs after all the HTML above it has been parsed, so it can safely access any element on the page:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>The same effect can be achieved by putting the script in the <head> with defer, because deferred scripts wait until parsing is complete:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>A plain <script> in the <head> (without defer) runs before the body is parsed, so document.getElementById("title") would return null.
type="module"
Set type="module" to load the script as a JavaScript module. Modules can use import and export to share code between files, run in strict mode automatically, and are deferred by default (they execute after the HTML is parsed, even without the defer attribute):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>How to Trigger Scripts
You can specify whether to make a script run automatically (as soon as the page loads) or after the user has done something (like hovering over or clicking a link). If you want the script to run if the user performs any action (called an event), then you should use event handlers to let the browser know which event is responsible for triggering the script.
Event handlers can be specified as attributes within HTML tags, or attached via JavaScript using methods like addEventListener.
Example of the HTML <script> tag with an event handler:
Event Handler Example — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>The <noscript> element
Though many modern browsers support JavaScript, some older browsers cannot run JavaScript code, and users may also have JavaScript disabled in their browsers. To provide alternative information for non-JavaScript browsers or browsers with JavaScript disabled, use the <noscript> tag. The contents of this tag are displayed to the user only when JavaScript is disabled or when the browser doesn’t support JavaScript.
Example of the HTML <noscript> tag:
My first JavaScript example! — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Here the <p id="output"> is declared before the <script>, so the paragraph already exists in the DOM when the script runs and getElementById can find it. When JavaScript is enabled, the user sees "My first JavaScript example!"; when it is disabled, the browser ignores the script and shows the <noscript> message.
Related
- HTML
<script>tag — full attribute reference (src,type,defer,async, and more). - HTML
<noscript>tag — fallback content for users without JavaScript. - JavaScript Events — respond to clicks, hovers, and other user actions.