The <script> tag in HTML is used to embed or reference executable code, most commonly JavaScript. It allows you to add interactivity, dynamic behavior, and advanced functionality to your web pages.
This article covers everything you need to know about the <script> tag, including its syntax, attributes, usage patterns, and best practices.
What is the <script> Tag?
The <script> element is an HTML tag that is used to define a client-side script. You can either include the script inline or reference it from an external file. It is commonly placed in the <head> or at the end of the <body> section of an HTML document.
Basic Syntax
There are two ways to use the <script> tag:
1. Inline Script
<script>
alert("Hello, World!");
</script>2. External Script
<script src="script.js"></script>Attributes of the <script> Tag
The <script> tag supports several attributes that control how and when the script is loaded and executed.
| Attribute | Description |
|---|---|
src |
Specifies the URL of an external script file. |
type |
Defines the MIME type of the script. Default is text/javascript. |
async |
Loads the script asynchronously without blocking HTML parsing. |
defer |
Defer script execution until after the document has been parsed. |
nomodule |
Used with type="module" to prevent execution in modern browsers. |
crossorigin |
Sets CORS settings for fetching the script. Values: anonymous, use-credentials. |
integrity |
Enables Subresource Integrity (SRI) to verify the script hasn't been tampered with. |
referrerpolicy |
Specifies the referrer information to send with the request. |
language |
Deprecated. Previously used to define the scripting language. Use type instead. |
Script Loading Behavior
By default, external scripts block HTML parsing until the script is downloaded and executed. However, the async and defer attributes allow more control over the script loading behavior.
Default Behavior
<script src="main.js"></script>This blocks HTML parsing until the script is loaded and run.
Asynchronous Loading (async)
<script src="analytics.js" async></script>- Script loads in parallel with the HTML parsing.
- Executes immediately once downloaded.
- Execution order is not guaranteed.
Deferred Loading (defer)
<script src="main.js" defer></script>- Script loads in parallel.
- Execution is deferred until after the HTML parsing is complete.
- Executes in the order in which they appear in the document.
Recommendation
Use defer for most scripts to ensure they do not block page rendering and execute in the correct order.
Script Modules
To use ES6 modules in modern browsers, use the type="module" attribute.
<script type="module" src="app.mjs"></script>Modules are deferred by default and support import/export syntax.
You can also use nomodule to provide fallback for older browsers:
<script nomodule src="fallback.js"></script>Cross-Origin and Security
Using Subresource Integrity (SRI)
When loading scripts from a CDN, use the integrity and crossorigin attributes to improve security.
<script src="https://cdn.example.com/lib.js"
integrity="sha384-abc123..."
crossorigin="anonymous"></script>Referrer Policy
Control how much referrer information is sent with requests using referrerpolicy.
<script src="lib.js" referrerpolicy="no-referrer"></script>Placement of <script> Tags
Scripts can be placed in different parts of your HTML:
- In the
<head>section (only recommended withdeferorasync) - Just before the closing
</body>tag (traditional placement for synchronous scripts)
<body>
<!-- Page content -->
<script src="main.js" defer></script>
</body>Deprecated Attributes
Avoid using deprecated attributes like language. Use type instead to specify the scripting language.
<!-- Deprecated -->
<script language="javascript">...</script>
<!-- Preferred -->
<script type="text/javascript">...</script>Summary
The <script> tag is an essential part of modern web development. Understanding its behavior, attributes, and best practices ensures faster, safer, and more reliable web pages. Always prefer deferred scripts for better performance and consider using Subresource Integrity when loading third-party scripts.