<script>

The script element is used to embed JavaScript code inline or to load an external JS file.

Syntax

<!-- Inline JavaScript -->
<script>
  console.log("Hello!");
</script>

<!-- Load an external file -->
<script src="app.js"></script>

<!-- Asynchronous loading (defer recommended) -->
<script src="app.js" defer></script>

Common Attributes

Attribute	Description
src	Specifies the URL of an external JavaScript file. If set, any inline code inside the tag is ignored.
type	Specifies the MIME type of the script. Defaults to `text/javascript` if omitted. Use `module` to load the script as an ES module.
defer	Defers script execution until HTML parsing is complete, just before the `DOMContentLoaded` event. Only applies to external files.
async	Downloads the script in parallel with HTML parsing and executes it as soon as the download is complete. Execution order is not guaranteed.
module	Setting `type="module"` treats the script as an ES module. Behaves like `defer` by default.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Script Sample</title>

  <!-- defer: runs after the DOM is built (recommended in <head>) -->
  <script src="main.js" defer></script>

  <!-- async: runs immediately after download (use for independent scripts) -->
  <script src="analytics.js" async></script>

  <!-- ES module -->
  <script type="module" src="app.mjs"></script>
</head>
<body>

  <p id="message">Loading...</p>

  <!-- Inline script (traditionally placed at the end of <body>) -->
  <script>
    // The DOM exists here, so you can access it directly
    document.getElementById("message").textContent = "Loaded!";
  </script>

</body>
</html>

Output

When the page loads, the inline script replaces the paragraph text.

<!-- Content displayed on the page -->
Loaded!

Notes

Where you place the script element and how you load it has a significant impact on page load performance. A plain script tag inside <head> blocks HTML parsing, so it is strongly recommended to add the defer attribute when loading external scripts. With defer, the script downloads in the background without blocking parsing and executes after the DOM is fully built.

async is well suited for scripts that operate independently, such as analytics tools or ad tags. Because the execution order of multiple async scripts is not guaranteed, avoid using it for scripts that depend on each other.

Using ES modules (type="module") lets you split your code across files with import/export syntax. Modules behave like defer by default and are only loaded once even if referenced multiple times. On pages where you want to disable script execution entirely, you can use the noscript element to display fallback content.