<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

The snippet includes JavaScript inside its HTML. Unavailable or blocked: browser dialog “alert()”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

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

  greet('User');
</script>

External Script

Link to an external JavaScript file:

Example

Unavailable or blocked: script “script.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Async and Defer Scripts

Use async or defer for better performance:

Example

Unavailable or blocked: script “analytics.js”; script “app.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- 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

The snippet includes JavaScript inside its HTML. Unavailable or blocked: script “main.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: script “modern-app.js”; script “legacy-app.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- 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

Unavailable or blocked: script “https://cdn.example.com/library.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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:

🚀 Try in Code Playground

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

Unavailable or blocked: script “critical.js”; script “app.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: script “app.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: script “main.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- 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

<noscript>
Fallback for no JavaScript
<link>
Links external resources
<meta>
Defines metadata
<style>
Defines CSS styles
<head>
Contains document metadata