⚡ Module 16 · JS Integration🟡 IntermediateLESSON 55
The Script Tag
Course progress74%
🎯 What you'll learn:
<script src>, the crucial difference between defer and async, type="module", and where to place scripts.
Section 1
Basic script src
By default, when the browser hits a <script> tag, it stops parsing the HTML, downloads the script (if external), and executes it — then resumes parsing. This blocking behavior is the reason placement and loading attributes matter so much.
script-basic.html
HTML
<script src="app.js"></script>
Section 2
defer vs async
Both let HTML parsing continue while the script downloads in the background — but they differ in when the script runs afterward.
defer-async.html
HTML
<script src="analytics.js" async></script> <script src="app.js" defer></script>
| Attribute | Runs when | Preserves order? |
|---|---|---|
| (none, default) | Immediately, blocking HTML parsing | Yes, but blocks |
| async | As soon as it finishes downloading — whenever that is | No — can run out of order |
| defer | After HTML parsing completes, in document order | Yes |
💡
Use defer for scripts that touch the DOM
defer guarantees the HTML is fully parsed before your script runs and preserves order relative to other deferred scripts — async is better suited to independent scripts like analytics that don't depend on the page or each other.
Section 3
type="module" & Placement
type="module" enables ES module syntax (import/export) and automatically behaves like defer. Placing a regular script at the very end of <body> is the classic alternative way to avoid blocking — the whole page is already parsed by the time the script loads.
script-module.html
HTML
<script type="module" src="main.js"></script>
🧩 Knowledge Check — Lesson 55
5 questions to test your understanding.
1. What does an unattributed <script src> do to HTML parsing?
2. Does async guarantee scripts run in the order they appear?
3. Why is defer generally better for scripts that manipulate the DOM?
4. What does type="module" enable?
5. Why do scripts get placed at the end of body as an alternative to defer?
Coding Challenge — Lesson 55
Apply what you learned · Intermediate Level
Challenge: Load Two Scripts Correctly
Write a head section loading analytics.js with async (order doesn't matter) and app.js with defer (it manipulates the DOM and must run after parsing).
Write a head section loading analytics.js with async (order doesn't matter) and app.js with defer (it manipulates the DOM and must run after parsing).
💡 Show hints if you're stuck
- Both attributes are boolean — just add the word, no value needed.
Finished this lesson?
Mark it complete to track your progress.
Lesson 55 of 62Module 16 — HTML + JavaScript