Table of contents
1.
Introduction
2.
Definition and Usage
3.
Syntax
3.1.
Key Points
4.
How Does It Work?
5.
Where to Place the `<script>` Tag?
5.1.
1. Inside the `<head>` Section:  
5.2.
2. Inside the `<body>` Section
6.
Attributes
6.1.
1. `src` Attribute
6.2.
2. `type` Attribute
6.3.
3. `async` Attribute
6.4.
4. `defer` Attribute
6.5.
5. `crossorigin` Attribute
6.6.
6. `integrity` Attribute
6.7.
7. `nomodule` Attribute
7.
Examples
7.1.
Example 1: Inline JavaScript
7.2.
Example 2: External JavaScript
7.3.
Example 3: Using async and defer
8.
Supported Browsers
9.
Frequently Asked Questionss
9.1.
Can I use multiple <script> tags in one HTML file?
9.2.
What is the difference between async and defer attributes?
9.3.
Should I place the <script> tag in the <head> or <body>?
10.
Conclusion
Last Updated: Jan 5, 2025
Easy

HTML <script> Tag

Author Pallavi singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The HTML <script> tag is used to embed or reference JavaScript code within an HTML document. It allows developers to add interactivity, functionality, and dynamic behavior to web pages. Commonly, the <script> tag is used to include JavaScript directly in the HTML or link to an external JavaScript file. This tag plays a vital role in enhancing user experience by enabling features such as form validation, animations, and event handling.

HTML <script> Tag

In this article, we will discuss the syntax of the <script> tag, its attributes, practical examples, and browser support. 

Definition and Usage

The `<script>` tag in HTML is used to embed or reference JavaScript code within a web page. JavaScript is a programming language that adds interactivity & dynamic behavior to websites. The `<script>` tag can be placed in the `<head>` or `<body>` section of an HTML document, depending on when you want the script to execute.

Syntax

The basic syntax of the <script> tag is as follows:

<script>
    // JavaScript code goes here
</script>


The <script> tag can also include a src attribute to link an external JavaScript file:

<script src="script.js"></script>

Key Points

  1. It is placed either inside the <head> or <body> tag of an HTML document.
     
  2. Inline scripts go between the opening and closing <script> tags.
     
  3. External scripts are loaded by specifying a file path in the src attribute.

How Does It Work?

When a browser loads an HTML page, it reads the content line by line. If it encounters a `<script>` tag, it stops rendering the page temporarily & executes the JavaScript code inside the tag. Once the script is executed, the browser continues rendering the rest of the page.

Where to Place the `<script>` Tag?

1. Inside the `<head>` Section:  

Placing the `<script>` tag in the `<head>` section means the script will load & execute before the page content is displayed. This is useful for scripts that need to run before the page loads, like initializing variables or setting up configurations.

Example:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Script Tag Example</title>
       <script>
           alert("This script runs before the page loads!");
       </script>
   </head>
   <body>
       <h1>Welcome to My Website</h1>
   </body>
   </html>

 

Output

Output

 

2. Inside the `<body>` Section

Placing the `<script>` tag at the end of the `<body>` section ensures that the script runs after the page content is loaded. This is ideal for scripts that interact with the DOM (Document Object Model), like adding event listeners or modifying page elements.

 Example:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Script Tag Example</title>
   </head>
   <body>
       <h1>Welcome to My Website</h1>
       <script>
           alert("This script runs after the page loads!");
       </script>
   </body>
   </html>

 

Output

Output

Attributes

1. `src` Attribute

The `src` attribute is used to link an external JavaScript file to your HTML document. Instead of writing JavaScript code directly inside the `<script>` tag, you can store it in a separate file & reference it using `src`.

Example:

<script src="script.js"></script>


In this example, the browser will fetch & execute the JavaScript code from the `script.js` file.

2. `type` Attribute

The `type` attribute specifies the type of script being used. For JavaScript, the value is `text/javascript`. However, in modern HTML5, this attribute is optional because JavaScript is the default scripting language.

Example:

<script type="text/javascript">
    console.log("This is a JavaScript script!");
</script>

3. `async` Attribute

The `async` attribute tells the browser to load the script asynchronously. This means the script will be downloaded in the background while the HTML content continues to load. Once the script is downloaded, it will execute immediately, pausing the HTML rendering if necessary.

Example:

<script src="script.js" async></script>


Use this attribute for scripts that don’t depend on other scripts or the DOM being fully loaded.

4. `defer` Attribute

The `defer` attribute tells the browser to load the script in the background but wait to execute it until the HTML content is fully loaded. This ensures that the script runs only after the entire page is ready.

Example:

<script src="script.js" defer></script>


Use this attribute for scripts that need to interact with the DOM or depend on other scripts.

5. `crossorigin` Attribute

The `crossorigin` attribute is used when loading scripts from a different domain (cross-origin). It controls how the browser handles credentials & error reporting for the script.

Example:

<script src="https://example.com/script.js" crossorigin="anonymous"></script>


The `anonymous` value means no credentials (like cookies) are sent with the request.

6. `integrity` Attribute

The `integrity` attribute ensures that the script being loaded hasn’t been tampered with. It uses a cryptographic hash to verify the script’s integrity.

Example:

<script src="script.js" integrity="sha384-abc123"></script>


If the script’s content doesn’t match the hash, the browser will block it.

7. `nomodule` Attribute

The `nomodule` attribute is used to provide a fallback script for older browsers that don’t support ES6 modules. The script will only execute in browsers that don’t support the `module` type.

Example:

<script nomodule src="fallback.js"></script>

Examples

Example 1: Inline JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script Example</title>
</head>
<body>
    <h1 id="welcome">Welcome!</h1>
    <script>
        document.getElementById("welcome").innerText = "Hello, Coding Ninjas!";
    </script>
</body>
</html>


Output:
The text inside the <h1> tag changes from "Welcome!" to "Hello, Coding Ninjas!" dynamically.

Example 2: External JavaScript

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="greet()">Click Me</button>
</body>
</html>


JavaScript File (script.js):

function greet() {
    alert("Hello from the external script!");
}


Output:
Clicking the button shows a pop-up alert saying, "Hello from the external script!"

Example 3: Using async and defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async vs Defer</title>
    <script src="async-script.js" async></script>
    <script src="defer-script.js" defer></script>
</head>
<body>
    <h1>Async and Defer Example</h1>
</body>
</html>


Behavior:

  • The script with async loads independently of the HTML parsing and executes as soon as it’s ready.
     
  • The script with defer waits until the entire HTML document is parsed before executing.

Supported Browsers

The <script> tag is supported by all modern web browsers, including:

  • Google Chrome
     
  • Mozilla Firefox
     
  • Safari
     
  • Microsoft Edge
     
  • Opera
     

Older versions of Internet Explorer also support the <script> tag, but newer attributes like async may have limited compatibility.

Frequently Asked Questionss

Can I use multiple <script> tags in one HTML file?

Yes, you can use multiple <script> tags within an HTML file. Place them in the desired order of execution, ideally before the closing <body> tag for better performance.

What is the difference between async and defer attributes?

async executes the script as soon as it is downloaded, potentially before the HTML is fully parsed. defer ensures the script executes only after the entire HTML document is parsed.

Should I place the <script> tag in the <head> or <body>?

While you can place the <script> tag in either section, placing it at the end of the <body> is recommended for better page load performance.

Conclusion

The HTML <script> tag is a powerful tool for adding JavaScript to your webpages, whether inline or through external files. Understanding its syntax, attributes, and practical uses is essential for building interactive and dynamic web applications. 

You can also check out our other blogs on Code360.

Live masterclass