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.
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
It is placed either inside the <head> or <body> tag of an HTML document.
Inline scripts go between the opening and closing <script> tags.
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
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
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.
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.
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.
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.
519+ registered 
