HTML script Tag: How to Add JavaScript to a Web Page

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.

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 src to link to external files.
• Use async to load fast, unordered scripts.
• Use defer for scripts that depend on the DOM.
• You have to escape input to avoid XSS and apply secure headers.

FAQs

textContent

JSON.parse()

Similar Reads