<script>

<script> embeds executable code, references an external script, or holds a data block identified by type. It can appear in head or body; there is no rule that it belongs in head by default.

A working enhancement

The button exists before this inline script runs, so the script can attach its listener. The visible note updates after activation.

<button type="button" id="show">Show a note</button>
<p id="note" role="status">No note selected.</p>
<script>
  document.querySelector("#show").addEventListener("click", () => { document.querySelector("#note").textContent = "Change one value at a time."; });
</script>

Loading behavior

A parser-inserted classic script without async or defer normally pauses HTML parsing while it is fetched and executed. An external classic script with defer fetches in parallel and runs after parsing, in document order, before DOMContentLoaded. async runs as soon as ready and does not preserve that order.

defer does not defer an inline classic script. type="module" uses module behavior and is deferred by default; module imports require appropriate URL and CORS handling. Do not assume a file opened through file: behaves like a served module project.

Content and safety

With src, put the executable code in the referenced file rather than relying on inline fallback code in the same element. Script needs an end tag even when it has src. A data-block type such as application/json is not executed as JavaScript.

Do not put untrusted text into executable code or host HTML. Use textContent for ordinary displayed text. This preview executes inside a sandbox that prevents access to the host article.

Disable scripting in a copied document to inspect the basic content, then consider an actual fallback with noscript or progressive enhancement.

Sources and browser support

MDN: script describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.