HTML Async vs Defer vs Module Scripts

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore async vs defer vs module scripts using a short example that you can inspect and change.

The Idea in Plain English

Classic scripts without async/defer can block HTML parsing, defer scripts execute after parsing, and async scripts run when ready. Module scripts have their own default deferred behavior.

HTML supplies the structure; JavaScript supplies the behavior described here. If you remove the script, check what remains usable for visitors.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<head>
    <script defer src="/js/library.js"></script>
    <script defer src="/js/page.js"></script>
</head>
<body>
    <h1 id="page-title">Lesson</h1>
</body>

What Each Part Does

• The script element can load code or hold data; the type attribute tells the browser how to treat its contents.
• The h1 identifies the principal page heading.
• The head holds page metadata, not the visible lesson content.
• src points to the asset the browser should load.
• id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.

The browser gets more opportunity to build the DOM before deferred application code runs.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Async vs Defer vs Module Scripts, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.

Common Beginner Mistakes

• Using async for scripts that must run in a fixed dependency order.
• Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
• Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

• Classic scripts without async/defer can block HTML parsing, defer scripts execute after parsing, and async scripts run when ready. Module scripts have their own default deferred behavior.
• The browser gets more opportunity to build the DOM before deferred application code runs.
• Test the markup in a browser, and check accessibility and real-world behavior where relevant.