← Back to All Tags

<script>

Defines client-side JavaScript code

Definition and Usage

The <script> tag is used to embed or reference executable JavaScript code in an HTML document.

The <script> element either contains script statements, or it points to an external script file through the src attribute.

JavaScript is commonly used for image manipulation, form validation, dynamic content updates, and interactive features.

Tip: Use the async or defer attribute to improve page load performance.
Note: If the <script> tag has a src attribute, it should be empty (no content between tags).

Browser Support

The <script> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
src URL Specifies the URL of an external script file
type text/javascript
module		 Specifies the media type of the script (default: text/javascript)
async async Script is executed asynchronously (only for external scripts)
defer defer Script is executed when the page has finished parsing
crossorigin anonymous
use-credentials		 Sets the CORS mode for script requests
integrity hash Allows browser to verify fetched script for subresource integrity
nomodule nomodule Script should not be executed in browsers that support ES modules
referrerpolicy no-referrer
origin
strict-origin		 Specifies which referrer information to send when fetching script

The <script> tag also supports the Global Attributes in HTML.

Examples

Inline Script

Embed JavaScript directly in the HTML:

Example

<script>
  console.log('Hello, World!');

  function greet(name) {
    alert('Hello, ' + name + '!');
  }

  greet('User');
</script>

External Script

Link to an external JavaScript file:

Example

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

Async and Defer Scripts

Use async or defer for better performance:

Example

<!-- Async: Downloads in parallel, executes as soon as available -->
<script src="analytics.js" async></script>

<!-- Defer: Downloads in parallel, executes after HTML parsing -->
<script src="app.js" defer></script>

Module Script

Use ES6 modules with type="module":

Example

<script type="module">
  import { greet } from './modules/greeting.js';

  greet('World');
</script>

<!-- External module -->
<script type="module" src="main.js"></script>

Module with Nomodule Fallback

Provide fallback for older browsers:

Example

<!-- Modern browsers -->
<script type="module" src="modern-app.js"></script>

<!-- Fallback for older browsers -->
<script nomodule src="legacy-app.js"></script>

Script with Integrity Check

Verify CDN scripts with Subresource Integrity (SRI):

Example

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
  crossorigin="anonymous">
</script>

Try it Yourself

Interactive Example

Click the button to see JavaScript in action:

Script Loading Strategies

Understanding when and how scripts execute:

Strategy Execution Timing Best For
Normal
<script src="...">		 Blocks HTML parsing, executes immediately Critical scripts that must run before page renders
Async
<script async>		 Downloads in parallel, executes as soon as ready Independent scripts (analytics, ads) that don't depend on DOM
Defer
<script defer>		 Downloads in parallel, executes after HTML parsing Scripts that need full DOM access, maintains order
Module
<script type="module">		 Deferred by default, supports imports Modern apps using ES6 modules, automatic deferred loading
Recommendation: Use defer for most scripts, async for independent third-party scripts, and type="module" for modern JavaScript apps.

Script Placement

In the <head>

Scripts in the head block page rendering until they finish downloading and executing.

Example

<head>
  <script src="critical.js"></script>
  <!-- or use defer to not block -->
  <script src="app.js" defer></script>
</head>

Before Closing </body>

Traditional approach - ensures DOM is loaded before script runs.

Example

<body>
  <!-- Page content -->

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

Module Scripts

ES6 modules provide modern JavaScript features:

  • Strict mode by default
  • Deferred execution (like defer)
  • Import/export functionality
  • Better code organization and reusability
  • Automatic scoping (no global pollution)

Example

<!-- math.js -->
export function add(a, b) {
  return a + b;
}

<!-- main.js -->
import { add } from './math.js';
console.log(add(2, 3)); // 5

<!-- HTML -->
<script type="module" src="main.js"></script>

Best Practices

  • Use defer or async attributes to improve page load performance
  • Place scripts before the closing </body> tag or use defer in <head>
  • Use integrity attribute when loading scripts from CDNs for security
  • Minimize the number of script files by bundling (use build tools)
  • Use type="module" for modern JavaScript with import/export
  • Avoid inline scripts; use external files for better caching and maintainability
  • Use nomodule to provide fallbacks for older browsers
  • Consider code splitting and lazy loading for large applications
  • Always validate and sanitize user input to prevent XSS attacks

Related Tags