HTML nomodule Attribute

Introduction

The nomodule attribute is a boolean HTML attribute on <script> elements. It marks a script as a legacy fallback: browsers that support ES modules (via type="module") skip nomodule scripts, while older browsers that lack module support run them as classic scripts. The typical pattern pairs one modern module script with one nomodule fallback so each visitor loads exactly one bundle. This is progressive enhancement for the transition from pre-module browsers to ES6 modules.

What You’ll Learn

Purpose of nomodule Attribute

The primary purpose of nomodule is browser compatibility during the ES module era. You ship modern code with <script type="module"> (import/export syntax, strict mode, deferred by default) and a separate transpiled bundle with nomodule for browsers like Internet Explorer 11 that cannot parse modules. Module-capable browsers ignore the fallback, so users never download and execute both.

The attribute does not block module scripts from loading—it marks which classic script is the fallback. The old reference incorrectly suggested it prevents older browsers from loading modules; in reality, old browsers never understood type="module" anyway and treated those tags as unknown, while nomodule scripts ran normally.

📝 Syntax

Pair a module script with a nomodule fallback on separate <script> tags:

<!-- Modern browsers: runs this -->

<script type="module">

  import { init } from "./app.mjs";

  init();

</script>



<!-- Legacy browsers: runs this instead -->

<script nomodule>

  // Transpiled bundle for browsers without module support

  initApp();

</script>

Syntax Rules

• Boolean attribute—write nomodule alone; no value required.
• Valid only on <script> elements.
• Works with inline scripts or external src files.
• Classic script rules apply: can use defer or async on nomodule scripts.
• Do not put type="module" and nomodule on the same tag.
• JavaScript DOM property: scriptElement.noModule = true (camelCase).

💎 Values

The nomodule attribute is boolean—it has no meaningful string value:

• nomodule — Attribute present; script runs only in non-module browsers.
• nomodule="" — Also valid in HTML5; same as bare nomodule.
• Attribute absent — Classic script; runs in all browsers (including those that also run module scripts).
• JavaScript: script.noModule = true sets the attribute; false removes legacy-only behavior.

const fallback = document.createElement("script");

fallback.noModule = true;

fallback.src = "legacy-bundle.js";

document.body.appendChild(fallback);



// Detect module support
const supportsModules = "noModule" in HTMLScriptElement.prototype;

Applicable Elements

type="module" vs nomodule vs classic <script>

For dual-bundle setups, use module + nomodule only. Avoid adding a third classic script that would run in modern browsers alongside the module.

Examples Gallery

Inline module fallback, dynamic script injection, and external src bundle pattern.

<script type="module">

  document.body.insertAdjacentHTML("beforeend", "<p>Loaded using module script.</p>");

</script>



<script nomodule>

  document.body.insertAdjacentHTML("beforeend", "<p>Loaded using nomodule fallback.</p>");

</script>

<script>

  if ("noModule" in HTMLScriptElement.prototype) {

    const mod = document.createElement("script");

    mod.type = "module";

    mod.src = "app.mjs";

    document.body.appendChild(mod);

  } else {

    const legacy = document.createElement("script");

    legacy.noModule = true;

    legacy.src = "app-legacy.js";

    document.body.appendChild(legacy);

  }

</script>

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

<script nomodule defer src="app-legacy.js"></script>

♿ Accessibility

• Scripts should not block content — Use defer on nomodule fallbacks so legacy scripts do not freeze rendering.
• Feature parity — Ensure the nomodule bundle provides equivalent functionality, not a degraded experience for assistive tech users.
• Avoid document.write — Legacy fallbacks should not use patterns that break parsing or focus order.
• Progressive enhancement — Core content should work without JavaScript; scripts enhance, not replace, accessible HTML.
• Same UX paths — Module and legacy bundles should expose the same interactive elements and labels.

💡 Best Practices