REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<script>

AI & DATA SCIENCE // script-tag

The <script> element embeds or references JavaScript that the browser parses and executes, either inline or via an external file.

Syntax

<script src="/app.js" defer></script>
<script>
  console.log('inline script');
</script>

Deep Dive Course

**`<script>`** either contains inline JavaScript directly between its tags, or points to an external file via **`src`**. By default, a script blocks HTML parsing while it downloads and runs. Two attributes change that: **`defer`** downloads the script in the background and runs it only after the HTML is fully parsed (in document order, if multiple), while **`async`** downloads in the background too but runs it AS SOON AS it's ready, potentially interrupting parsing and out of order relative to other scripts. Modern JavaScript modules use `type="module"`, which is deferred by default.

1Understanding <script>

`<script>` either contains inline JavaScript directly between its tags, or points to an external file via `src`. By default, a script blocks HTML parsing while it downloads and runs. Two attributes change that: `defer` downloads the script in the background and runs it only after the HTML is fully parsed (in document order, if multiple), while `async` downloads in the background too but runs it AS SOON AS it's ready, potentially interrupting parsing and out of order relative to other scripts. Modern JavaScript modules use type="module", which is deferred by default.

💡

For most cases, defer is the safer default: your script runs after the DOM is fully built, and multiple deferred scripts still execute in the order they appear in the HTML.

editor.html

<head>
  <script src="/main.js" defer></script>
</head>
<body>
  <button id="btn">Click me</button>
</body>

localhost:3000

2Practical Example

Here is a real-world application of <script> showing how it is used in production HTML.

editor.html

<!-- Loading an ES module -->
<script type="module">
  import { greet } from './greet.js';
  greet('World');
</script>

localhost:3000

3Best Practices

Follow these guidelines when working with <script>:

1. Use defer for scripts that need the full DOM or must run in a predictable order

2. Use async only for independent scripts with no dependency on DOM order (e.g. some analytics snippets)

3. Use type="module" for modern ES module JavaScript, which is deferred by default and supports import/export

⚠️

Tip: For most cases, defer is the safer default: your script runs after the DOM is fully built, and multiple deferred scripts still execute in the order they appear in the HTML.

editor.html

<head>
  <script src="/main.js" defer></script>
</head>
<body>
  <button id="btn">Click me</button>
</body>

localhost:3000

Examples

Example 01Basic Usage

<head>
  <script src="/main.js" defer></script>
</head>
<body>
  <button id="btn">Click me</button>
</body>

Example 02Advanced Example

<!-- Loading an ES module -->
<script type="module">
  import { greet } from './greet.js';
  greet('World');
</script>

Best Practices

Use defer for scripts that need the full DOM or must run in a predictable order
Use async only for independent scripts with no dependency on DOM order (e.g. some analytics snippets)
Use type="module" for modern ES module JavaScript, which is deferred by default and supports import/export

Interview Question

What's the practical difference between defer and async on a <script> tag?▼

Hint: Think about download timing, execution timing, and order relative to other scripts.

Both defer and async download the script in the background without blocking HTML parsing. The difference is execution timing: defer waits until the HTML document is fully parsed, and multiple deferred scripts run in their source order, guaranteed. async runs the script the instant it finishes downloading — which could be before or during parsing — and doesn't guarantee execution order relative to other async scripts. Use defer when your script depends on the DOM or on running after another script; use async for fully independent scripts like some third-party analytics.

Exercises

EasyPractice using <script> in a real scenario.

View Solution

<head>
  <script src="/main.js" defer></script>
</head>
<body>
  <button id="btn">Click me</button>
</body>

Frequently Asked Questions

What's the practical difference between defer and async on a <script> tag?▼

Related Functions

head-tagbody-tagnoscript-tag