ES Module Scripts in HTML

Module Scripts

<script type="module"> enables ES module syntax — import and export — directly in HTML. Modules are deferred by default and run in strict mode.

Each module has its own scope, preventing global variable pollution.

Example

<!-- main.html -->
<script type="module" src="main.js"></script>

<!-- main.js -->
import { greet } from "./utils.js";
greet("World");

<!-- utils.js -->
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

HTML

Full Editor

Pro Tip

Module scripts are always deferred — no need to add the defer attribute explicitly.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned