Table of contents

HTML <script> Tag

What is HTML <script> Tag?

The HTML script tag is used to embed JavaScript code into an HTML document. It allows web developers to add dynamic behavior, interactive content, and client-side functionality to web pages. The script tag can either include JavaScript code directly inside it or reference an external JavaScript file using the src attribute. It is most commonly placed inside the head or body section of an HTML page. The HTML script tag is one of the most powerful tools in modern web development.

Syntax of the HTML <script> Tag

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

The script tag begins with <script> and ends with </script>. You can also use the src attribute to link an external JavaScript file instead of writing the code directly.

Examples of HTML <script> Tag

Example 1: Basic HTML Script Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome to Scholar247</title>
  <script>
    alert("Hello! Welcome to Scholar247");
  </script>
</head>
<body>
  <h1>This is a JavaScript Alert Example</h1>
</body>
</html>

Explanation:
In this basic example, the HTML script tag displays an alert message saying “Hello! Welcome to Scholar247” when the page loads. The script is written directly within the tag.

Example 2: External JavaScript File Example

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Scholar247 JavaScript Example</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>External JavaScript File Example</h1>
</body>
</html>

Explanation:
This example shows how to link an external JavaScript file using the src attribute. The browser will load and execute the JavaScript code written in the external file named “script.js”.

Attributes of the HTML <script> Tag

The HTML script tag supports several attributes:

• src – Specifies the URL of an external JavaScript file.
• type – Defines the scripting language (commonly “text/javascript”).
• async – Allows the script to load asynchronously without blocking page rendering.
• defer – Delays the execution of the script until the HTML document is fully loaded.
• crossorigin – Manages cross-origin requests for external scripts.
• integrity – Ensures the script file has not been modified by verifying its cryptographic hash.

Best Practices for HTML <script> Tag

• Place script tags at the end of the body to improve page load speed.
• Use external JavaScript files for better organization and reusability.
• Always include the defer or async attribute when possible to prevent render-blocking.
• Avoid using inline JavaScript for security and maintenance reasons.
• Validate your JavaScript code to prevent syntax and runtime errors.
• Use descriptive filenames for external scripts for better SEO and clarity.

FAQs About the HTML <script> Tag

Q1: What is the purpose of the HTML script tag?

The HTML script tag is used to add JavaScript to a webpage, allowing it to become interactive, dynamic, and responsive to user actions.

Q2: Can I have multiple script tags on one page?

Yes. You can use multiple script tags in an HTML page, either to include different JavaScript files or to run separate scripts within the same document.

Q3: What is the difference between async and defer?

The async attribute loads and executes the script immediately without waiting for the HTML parsing to finish, while defer waits until the HTML document is fully parsed before executing the script.

Q4: Where should I place the script tag?

You can place it inside the head or body section. However, placing it before the closing body tag is recommended for faster page loading.

Q5: What happens if the script tag is missing?

If the script tag is missing, the webpage will not execute any JavaScript code, which means interactive features or dynamic functions will not work properly.

HTML

Related Articles