HTML Script Tag

📜 Introduction

The <script> tag is used to embed or reference JavaScript code inside an HTML document. It enables web pages to become interactive by allowing developers to manipulate the DOM, validate forms, handle events, fetch data from servers, and much more.

Important

Always load scripts appropriately to improve performance and user experience.

🎯 Purpose of the Script Tag

  • Add interactivity to web pages.
  • Manipulate HTML and CSS dynamically.
  • Handle browser events.
  • Communicate with web servers using APIs.
  • Create animations and dynamic user interfaces.

📝 Basic Syntax

Inline JavaScript

<script>
  console.log("Hello World!");
</script>

The browser executes the JavaScript code enclosed within the <script> tag. Inline scripts are suitable for small examples but should generally be avoided in large applications.

External JavaScript File

Using src Attribute

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

Using the src attribute allows JavaScript code to be stored in a separate file, making applications easier to maintain and improving browser caching.

⚙️ Important Attributes

AttributeDescriptionExample
srcSpecifies an external JavaScript file.app.js
asyncDownloads and executes asynchronously.async
deferExecutes after HTML parsing completes.defer
typeSpecifies the script MIME type.module
crossoriginHandles CORS requests.anonymous

Example with defer

Deferred Script

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

The defer attribute ensures the script executes only after the HTML document has been completely parsed, which improves page loading performance.

Example with async

Async Script

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

The async attribute downloads the file without blocking HTML parsing and executes it immediately after download, regardless of document parsing state.

📍 Placement of Script Tags

Placing scripts inside the <head> may block page rendering unless defer or async is used.

Placing scripts before the closing </body> tag allows HTML to load before JavaScript executes, improving perceived performance.

Modern applications often use type="module", enabling reusable JavaScript modules with automatic deferred execution.

🔄 Script Loading Process

🌳 Script Types

HTML Script
Inline Script
External Script
Module Script
Import Modules
Export Modules

📂 Project Example

project
index.html

HTML File

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Script Example</title>
</head>
<body>

<h1>Welcome</h1>

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

</body>
</html>

JavaScript File

app.js

document.querySelector("h1").style.color = "blue";

💡 Best Practices

  • Prefer external JavaScript files.
  • Use defer for most scripts.
  • Use async for independent scripts like analytics.
  • Keep JavaScript modular using type="module".
  • Avoid excessive inline scripts.

Tip

Using defer is generally the recommended choice for application scripts because it preserves execution order while allowing HTML parsing to continue.

⚠️ Common Mistakes

  • Using src and inline JavaScript together in the same script tag.
  • Forgetting the file path.
  • Accessing DOM elements before they exist.
  • Loading multiple blocking scripts in the document head.

📚 Official Reference

Refer to the official HTML specification on MDN Web Docs for detailed information about the <script> element and its attributes.

📝 Summary

Summary

The <script> tag is the primary mechanism for adding JavaScript to HTML documents. It supports inline code, external files, asynchronous loading, deferred execution, and ES modules. Understanding when and how to use its attributes leads to faster, more maintainable, and interactive web applications.