The script tag adds JavaScript to a web page in HTML. This lets the page run logic or load content. The browser reads this tag and runs the script. You can write the code inside the tag or link to an external file.
Table of Content
Understand the HTML <script> Tag
The <script> tag runs code in an HTML document. It supports JavaScript and other formats.
Here is the syntax:
<script src="file.js"></script>You place the tag in the <head> or <body> section.
You use this tag to include or run JavaScript. This controls behavior, updates content, or tracks events.
Here are the differences between inline and external scripts:
Use inline scripts to write code directly in the HTML file:
<script>
alert("Hello");
</script>This example creates an alert pop-up on the page when the browser loads the script.
Use external scripts to keep code separate:
<script src="main.js"></script>This loads and runs JavaScript from the main.js file when the browser reaches this tag.
The tag runs these content types:
- JavaScript
- JSON (as data blocks)
- GLSL (for WebGL shaders)
Browsers pause HTML parsing. They load and run scripts. This blocks the page.
Use Async and Defer with Script Tag in HTML
Use the Async:
Async loads scripts and does not block HTML parsing.
<script async src="app.js"></script>This script loads and runs on its own. It does not wait for HTML parse or other scripts.
Use Defer:
Defer loads the script while the browser parses HTML.
<script defer src="app.js"></script>This script runs after the HTML loads completely and preserves the script order.
- Async: The script runs as soon as it loads. The order is not fixed.
- Defer: The script runs after the browser parses the HTML, and it follows the document’s order.
Attributes of the Script Tag in HTML
The type sets the script format. Default is text/javascript.
<script type="text/javascript" src="main.js"></script>This tells the browser the script is JavaScript. This is the default if no type is set.
The src: Points to an external script file.
<script src="/path/to/app.js"></script>This loads the script from a file located at the path you provide.
The async: Runs the script when loaded.
<script async src="track.js"></script>This loads the script and runs it as soon as it’s ready, not in order with others.
Defer: The script runs only after the browser finishes parsing the HTML.
<script defer src="main.js"></script>This prevents the script from blocking HTML parsing and runs it after the browser builds the page.
The crossorigin: It sets CORS rules for external scripts.
<script src="https://cdn.site.com/lib.js" crossorigin="anonymous"></script>This allows the browser to request the script with CORS rules based on the attribute value.
The nomodule: Skips the script if the browser supports modules.
<script nomodule src="legacy.js"></script>This makes older browsers load the script, and modern ones ignore it if they support modules.` It skips the script if the browser supports modules.
Put the script in the <head> if it must load first, or place it before </body> to prevent render delays.
Script Loading Strategies
Use defer for scripts that need the DOM.
<script defer src="dom-ready.js"></script>This loads the script while the browser parses and runs it once the DOM becomes ready.
Use async for analytics or ads.
<script async src="ads.js"></script>This loads ads.js in parallel. It runs as soon as it’s ready and does not block rendering.
Place scripts near the end of <body> to avoid delays.
<body>
...
<script src="main.js"></script>
</body>This delays script load until the page content loads, so it reduces render blocking.
Do not trust user input in scripts. Escape all inputs. Use CSP headers to block inline scripts. Avoid innerHTML for dynamic content.
All major browsers support the <script> tag. Modern browsers also support type="module", defer, and async.
Examples
Load JavaScript From a File:
<script src="main.js"></script>This script loads code from main.js and blocks page rendering until the file fully loads and runs.
Run Inline Script:
<script>
console.log("Page Loaded");
</script>This script runs at the point where it appears. It writes “Page Loaded” into the browser console.
Use Async for Non-blocking Load:
<script async src="analytics.js"></script>This script loads in parallel and runs immediately after it becomes ready, without delay from the rest of the page.
Use Defer for DOM-dependent Script:
<script defer src="ui.js"></script>This script loads while parsing the page. It waits for DOM build to finish before running.
Wrapping Up
In this article, you learned what the <script> tag does and how to control its behavior. You also saw how to load scripts in the right order.
Here is a quick recap:
- Use
<script>to run or load JavaScript. - Use
srcto link to external files. - Use
asyncto load fast, unordered scripts. - Use
deferfor scripts that depend on the DOM. - You have to escape input to avoid XSS and apply secure headers.
FAQs
What does the <script> tag do in HTML?
Can I put <script> tags in the <head> and <body>?
How does async differ from defer in <script> tags?
How do I pass data inside a <script> tag?
textContentJSON.parse()Similar Reads
You use the style attribute to add CSS to a single HTML element without using a stylesheet or class. What…
Semantic article tag in HTML uses clear tags that show the role of each part. These tags tell browsers and…
HTML global attributes work on most elements. They do not depend on the tag name. You can use them with…
The HTML <cite> tag is a small but important tool for marking up the title of a creative work. You…
The HTML noscript tag tells the browser what to show when JavaScript does not run. This tag targets users who…
The HTML form tag helps you collect user input on a website. You use the HTML form tag to create…
The HTML <strong> tag shows strong importance. This tag gives semantic meaning to text. Screen readers and search engines recognize…
data-* attributes store extra values on elements without an extra DOM nodes or backend requests. What are data-* attributes in…
The HTML em tag shows stress or emphasis in text. It changes meaning for readers and screen readers. What is…
The <output> tag in HTML shows results inside a form. It helps display values from user actions or scripts. You…
