HTML nomodule Attribute

HTML nomodule Attribute

The HTML nomodule attribute is a Boolean attribute used on the <script> element to provide a fallback script for browsers that do not support JavaScript modules. Browsers that support module scripts do not execute a script marked with nomodule.

Elements That Use the nomodule Attribute

The nomodule attribute is used with the <script> element.

Boolean Attribute

The nomodule attribute is a Boolean attribute. Its presence tells a browser that supports JavaScript modules not to execute that script.

<script nomodule src="fallback.js"></script>

Because nomodule is Boolean, writing nomodule="false" does not disable it. The attribute is still present. To remove the nomodule behavior, omit the attribute entirely.

How nomodule Works

The nomodule attribute is designed to work with JavaScript modules. A browser that understands <script type="module"> ignores a script marked with nomodule.

<script type="module" src="modern.js"></script>
<script nomodule src="fallback.js"></script>

A browser with module support executes modern.js and does not execute fallback.js. An older browser that does not support module scripts can ignore the module script and use the classic fallback script instead.

Module and Fallback Scripts

The module and fallback pattern made it possible to deliver modern JavaScript to newer browsers while providing a separate classic script for older browsers.

<!-- JavaScript module for supporting browsers -->
<script type="module" src="app.js"></script>

<!-- Classic fallback script for older browsers -->
<script nomodule src="app-legacy.js"></script>

The fallback file can contain code written or transformed for browsers that do not support JavaScript modules.

Modern Browsers

JavaScript modules and the nomodule attribute are supported by current core browsers. As a result, the module/fallback pattern is mainly useful when a website intentionally supports older browsers that do not understand module scripts.

If support for those older browsers is not required, a separate nomodule fallback script may not be necessary.

Common Mistakes

Do not use nomodule="false" to try to make the script execute in module-supporting browsers. Because nomodule is Boolean, its presence enables the behavior regardless of the assigned text value.

Do not add type="module" to the same script that uses nomodule. The nomodule script is intended to be a classic-script fallback for browsers without module support.

Do not confuse nomodule with <noscript>. The nomodule attribute concerns support for JavaScript modules, while <noscript> provides fallback HTML when scripting is disabled or otherwise unavailable in the applicable context.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The nomodule attribute on the <script> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the nomodule Attribute

The example contains a module script and a nomodule fallback script. In a modern browser, only the module script changes the result.

Summary

The HTML nomodule attribute marks a classic script as a fallback for browsers that do not support JavaScript modules. Browsers with module support do not execute scripts marked with nomodule, allowing module and fallback scripts to be provided together.