Path // www.yourhtmlsource.com → Reference → <script>

<script>

by Ross Shannon

The <script> element is used to embed or reference executable code in an HTML document. Most commonly, this means JavaScript code that adds interactivity and dynamic behavior to web pages. Scripts can be written directly within the element or loaded from external files.

Clock This page was last updated on 2025-11-27


Syntax

External script:

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

Inline script:

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

Attributes

  • src - URL of an external script file
  • type - Script language MIME type (default is "text/javascript", rarely needed). Use "module" for ES modules.
  • async - Script is fetched asynchronously and executed as soon as available (doesn't block parsing)
  • defer - Script is fetched asynchronously but executed after HTML parsing completes
  • crossorigin - How to handle cross-origin requests ("anonymous" or "use-credentials")
  • integrity - Subresource integrity hash for security verification
  • nomodule - Script should not execute in browsers that support ES modules (for legacy fallback)
  • nonce - Cryptographic nonce for Content Security Policy

Examples

External script with defer (recommended):

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

Multiple scripts with proper loading:

<head>
  <!-- Critical script, blocks parsing -->
  <script src="critical.js"></script>
  
  <!-- Non-blocking, executes after parsing -->
  <script src="app.js" defer></script>
  
  <!-- Non-blocking, executes when ready -->
  <script src="analytics.js" async></script>
</head>

ES Module syntax:

<script type="module">
  import { helper } from './utils.js';
  helper.init();
</script>

<script type="module" src="app.mjs"></script>

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

Inline script with DOM manipulation:

<body>
  <button id="myBtn">Click Me</button>
  
  <script>
    document.getElementById('myBtn').addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
</body>

Third-party script with security:

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

When to Use

Use the <script> element to:

  • Add interactivity - Form validation, UI animations, dynamic content
  • Load external libraries - Frameworks, utilities, third-party services
  • Implement features - Single-page applications, real-time updates, API interactions
  • Track analytics - User behavior, page performance, conversion tracking
  • Configure widgets - Embedded content like maps, social buttons, chat widgets

Best practices:

  • Use defer for scripts that need the DOM to be ready (most common case)
  • Use async for independent scripts like analytics that don't depend on other code
  • Place scripts in the <head> with defer, or at the end of <body> without it
  • Prefer external files over inline scripts for maintainability and caching
  • Always include integrity hashes for third-party scripts
  • Use type="module" for modern ES6+ module syntax
  • Don't use the type attribute for regular JavaScript (not needed in HTML5)
  • Provide nomodule fallbacks for older browser support
  • Minimize render-blocking scripts to improve page load performance

Script loading behavior:

  • No attributes - Blocks HTML parsing, executes immediately
  • async - Downloads in parallel, executes when ready (order not guaranteed)
  • defer - Downloads in parallel, executes after parsing in order
  • type="module" - Automatically deferred, supports import/export

Related Elements

  • <noscript> - Fallback content when JavaScript is disabled
  • <head> - Common location for script elements
  • <body> - Scripts can also be placed at the end of body
  • <link> - Can preload scripts for better performance
  • <style> - Similar element for CSS instead of JavaScript