HTML JavaScript

Previously, accessibility made pages usable with structure — labels, landmarks, real buttons. JavaScript adds behavior on top of that HTML: respond to a click, update text, talk to a server. This lesson stays on the HTML side: how a page loads scripts with <script>, not a full JavaScript language course.

Why script loading matters

Browsers paint HTML first. Scripts can delay that work, fail silently on a bad path, or hide content that should already exist in markup. Knowing where to put <script>, when to use src, and what belongs in HTML keeps the page honest: content readable, controls present, behavior optional. Accessibility habits from last lesson still apply — keep real buttons and labels when you wire clicks.

Direct answer

1) Use <script>…</script> for a small inline snippet, or <script src="app.js"></script> for an external file.
2) Prefer external .js files once logic grows beyond a few lines.
3) Many tutorials place scripts near the end of body so content appears before script work.
4) Keep meaningful text and controls in HTML; do not rely on JS alone for critical content.
5) Modern apps may use type="module" — learn that when you study JavaScript in depth.
6) This course only covers embedding; loops, frameworks, and APIs are separate paths.

📊 Script wiring beginners use

Choice	What it does	Beginner tip
Inline script	Code sits between script tags	Fine for tiny demos; hard to reuse
External src	Loads a .js file from a path	Prefer as projects grow
End of body	Script runs after markup above it	Content can paint sooner
Behavior on HTML	JS finds elements by id/selectors	Elements must exist in the page
Content in HTML	Text and controls stay in markup	Page still makes sense if JS fails
Modules later	type=module for modern apps	Skip until you study JS deeply

Inline script with a real button

A tiny page shows the HTML job: a real <button> with an id, then a <script> that listens for a click and changes the button’s text. The markup stays accessible; the script only adds behavior.

Inline button click

html

<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Reading the inline demo

The button is real HTML — keyboard-friendly and meaningful without JS
id="hi" gives the script a stable hook (same idea as labeling with id earlier)
The <script> block holds a few lines of JavaScript inline
addEventListener("click", …) wires behavior; it does not replace the button
If the script never runs, the button still says “Say hi” and remains usable
Compare with last lesson: accessibility named and structured controls; here we attach behavior

External script with src

The same idea scales better as a separate file. HTML only declares where the file lives; the logic lives in app.js. Paths must match your folder layout.

External script src

html

<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Reading the external pattern

src="app.js" tells the browser to fetch and run that file
The HTML stays short; edits to behavior happen in one shared .js file
A wrong path (typo, wrong folder) means the script never loads — check Network/devtools
Place the script after the button in the markup, or ensure the script waits for the element
Prefer this pattern over huge inline blocks as demos grow
Next HTML lessons move on; deeper JS (syntax, modules, fetch) is its own course

Choosing how to load behavior

Tiny one-off demo: inline script next to the control can be fine
Anything you will reuse or grow: move logic to app.js and use src
Critical text or navigation: put it in HTML first, enhance with JS second
Broken feel after a change: verify the src path before hunting language bugs
Accessibility: keep <button> / <a> / labels — do not swap to clickable divs “because JS”
Full language study: leave loops, objects, and frameworks for a JavaScript course

Practice — HTML loads the script

Copy the inline demo; click the button and confirm the label changes.
Move the listener into app.js, switch to <script src="app.js"></script>, and confirm it still works.
Break the path (src="wrong.js"), reload, and note that the button stays “Say hi”.
Remove the script entirely and confirm the HTML still makes sense alone.
Add a second button with a new id and wire one more listener (inline or external).
Write one sentence: HTML owns content and structure; script loads optional behavior.
Peek ahead: the next lesson is a short HTML summary — keep script wiring in your toolkit.

Easy mistakes

Putting critical sentences only inside JavaScript so the page is empty without it
Typo or wrong folder in src so the file never loads
Giant inline scripts that are hard to share or test
Running a script before the element exists (script in head without waiting)
Replacing accessible buttons with clickable divs just to attach handlers
Treating this lesson as a full JavaScript curriculum (syntax deep-dives belong elsewhere)
Forgetting last lesson’s habits: unlabeled controls stay unlabeled even with fancy scripts

Summary

<script> loads JavaScript into an HTML page
Inline for tiny demos; src for external .js files as projects grow
Place scripts thoughtfully so content can appear and stay usable
Keep real content and accessible controls in HTML
Accessibility was structure; this lesson is behavior wiring
Next: a short HTML summary of the course so far

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top