Get the latest updates, in-depth tutorials, and exclusive resources on themes, templates, and code. Stay ahead with our expert insights—join our Telegram channel today!

HTML <script> Tag – Complete Guide and Reference

Complete guide to the HTML <script> tag including syntax, attributes, loading behavior, and best practices.

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.

HTML script tag syntax and attributes reference
An overview of how to use the <script> tag in HTML, including inline and external scripts, attributes like async, defer, type, and security options.

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 with defer or async)
  • 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.

My name is It Is Unique Official, and I write news articles on current threats and trending topics. I am based in Parbhani, Maharashtra, India.

Post a Comment

Please avoid spamming in the comment section; all comments are moderated by the admin for quality and relevance.