HTML <script> Element

Publish in HTML Tutorial el 25/05/2025 16:02

The <script> HTML element is used to embed or reference executable code, typically JavaScript, within an HTML document. This powerful element allows you to add interactivity, manipulate the DOM, handle events, and communicate with servers.

Key characteristics of the <script> element:

Can contain JavaScript code directly or reference an external file via the src attribute
Executes in order of appearance (unless using async or defer)
Blocks HTML parsing by default while executing
Can be placed in <head> or <body>, though modern practices often recommend before </body>

Basic Syntax

Here's the basic structure of a script element:

Or for external scripts:

Examples

1. Basic Inline Script

This example shows a simple inline script that displays an alert when the page loads:

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Inline Script Example</title>
</head>
<body>
  <h2>Welcome to my page</h2>
  
  <script>
    alert('Page loaded successfully!');
  </script>
</body>
</html>

2. External Script

This example demonstrates loading JavaScript from an external file. The external script contains a function that changes the button's text when clicked.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>External Script Example</title>
  <script src="https://artdraw.muisca.co/scripts/demo/button-handler.js"></script>
</head>
<body>
  <button id="action-btn">Click Me</button>
</body>
</html>

3. Script with async Attribute

The async attribute allows the script to download in parallel with HTML parsing and execute as soon as it's available, without blocking.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Async Script Example</title>
  <script async src="https://example.com/scripts/analytics.js"></script>
</head>
<body>
  <h2>Async script won't block page rendering</h2>
  <p>Check the network tab to see the behavior</p>
</body>
</html>

4. DOM Manipulation

This example shows how scripts can manipulate the DOM after the page loads:

Play Code

<!DOCTYPE html>
<html>
<body>
  <div id="content">Original Content</div>
  
  <script>
    document.getElementById('content').textContent = 'Modified by JavaScript!';
    document.getElementById('content').style.color = 'blue';
    document.getElementById('content').style.fontWeight = 'bold';
  </script>
</body>
</html>

5. Event Handling

This example demonstrates handling a button click event with JavaScript:

Play Code

<!DOCTYPE html>
<html>
<body>
  <button id="clicker">Click Me</button>
  <p id="message"></p>
  
  <script>
    document.getElementById('clicker').addEventListener('click', function() {
      document.getElementById('message').textContent = 'Button was clicked!';
      this.textContent = 'Clicked!';
      this.disabled = true;
    });
  </script>
</body>
</html>

Tips and Best Practices

Place scripts before </body>: This ensures the DOM is fully loaded before scripts execute.
Use external files: For better maintainability and caching benefits.
Consider async/defer: Use async for independent scripts, defer for scripts that depend on the DOM.
Minify production code: Reduce file size for better performance.
Use strict mode: Add 'use strict'; at the beginning of your scripts to catch common coding mistakes.
Module scripts: For modern applications, consider using <script type="module"> for ES6 module support.

Common Attributes

Attribute	Description
`src`	Specifies the URL of an external script file
`async`	Downloads script in parallel and executes as soon as available
`defer`	Downloads in parallel but executes after HTML parsing is complete
`type`	Specifies the script type (e.g., "text/javascript", "module")
`crossorigin`	Configures CORS requests for scripts