HTML Tutorial
HTML JavaScript
script tags add behavior: clicks, validation, and live updates. HTML stays the structure.
HTML stays the structure
HTML names the pieces: headings, buttons, paragraphs. CSS paints them. JavaScript changes them after the page has loaded: a click, a typed value, a message that appears without a full reload.
You do not need much JavaScript to see that split. This chapter keeps the scripts tiny on purpose. The markup still has to make sense with JavaScript turned off.
The script tag
Put code in a <script> element. The browser runs it as JavaScript, not as visible text. A script can live in the page or in a separate .js file linked with src.
Example
<p id="status">Ready.</p>
<script>
document.getElementById('status').textContent = 'Script ran.';
</script>When the script runs, it finds the paragraph by id and replaces its text. Try it in /html/try. The preview iframe is a good place for this: your script touches the example page, not the tutorial chrome.
A click that changes text
The simplest event is a click on a button. onclick runs a short snippet. Here it writes a new string into an element’s textContent — the visible text, without extra HTML.
Example
<p id="msg">Waiting for a click.</p>
<button type="button" onclick="document.getElementById('msg').textContent = 'You clicked the button.';">
Click me
</button>type="button" stops the control from submitting a form if you later wrap it in<form>. The handler is one line so you can see the whole path: find the node, settextContent.
Prefer textContent when you are putting plain words on the page. It does not parse tags. That is the safe default for beginner examples.
Put the script at the end of body
The browser reads HTML from top to bottom. If a script at the top asks for #msg before that paragraph exists, the lookup returns nothing and the line fails. Place scripts just before</body> so the elements they need are already in the tree.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click demo</title>
</head>
<body>
<h1>Orders</h1>
<p id="msg">No order yet.</p>
<button type="button" id="order">Place order</button>
<script>
document.getElementById('order').onclick = function () {
document.getElementById('msg').textContent = 'Order placed.';
};
</script>
</body>
</html>The button and the paragraph are in the body first. The script at the end can find both ids. The same pattern works if you move the code into app.js and write<script src="app.js"></script> at that same spot.
noscript for when JS is off
Some visitors block scripts. Search engines also read the HTML first. Put a fallback in<noscript> so the page still explains what they miss.
Example
<p id="msg">Choose a drink with the button.</p>
<button type="button" onclick="document.getElementById('msg').textContent = 'Espresso it is.';">
Espresso
</button>
<noscript>
<p>JavaScript is off. Email drink@harbor.example to order.</p>
</noscript>When scripts run, noscript stays hidden. When they do not, the paragraph appears. The button still exists in the HTML either way — it just will not change the message without JavaScript.
Keep the JavaScript tiny
Beginner HTML pages need very little behavior. A click that updates text, a bit of form checking, a menu toggle — that is enough. Large apps load separate files, modules, and frameworks. You do not need those to learn tags.
| Job | Where it belongs |
|---|---|
| Headings, buttons, forms | HTML |
| Color, space, layout | CSS |
| Clicks, live text, extra checks | JavaScript |
| Message if scripts are blocked | noscript |
HTML first
If the page is useless without the script, the structure is too thin. Write a real heading, a real button, and a real paragraph, then add a few lines of JavaScript. The next chapter is how those scripts and images find files: relative, root, and absolute paths.
Inline onclick is fine for a first demo. Larger pages listen withaddEventListener in a <script> at the end of the body. Same idea, less mixing of markup and code.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Physics
A button that shows KE
HTML is structure. script adds behaviour. The button is still a button without JavaScript; the click handler is extra.
Keep the visible numbers in the page. The script here only fills a result. That is the same split as a lab: instruments, then a calculator.
KE = ½ m v²
Example
<p>m = 2 kg, v = 3 m/s</p>
<button id="go" type="button">Show KE</button>
<p id="out"></p>
<script>
document.getElementById("go").onclick = function () {
document.getElementById("out").textContent = "KE = " + (0.5 * 2 * 3 * 3) + " J";
};
</script>Maths
Add two sides live
output is a form element meant for a calculated result. The oninput handler is a demo. A real app would not put logic in an HTML attribute for long.
c = a + b (lengths, not Pythagoras)
Example
<form oninput="out.value = Number(a.value) + Number(b.value)">
<input id="a" type="number" value="3"> m +
<input id="b" type="number" value="4"> m =
<output id="out" for="a b">7</output> m
</form>