Topic 0.2
HTML, CSS and JavaScript: Three Jobs
In one line
Every web page is built from three languages with separate jobs: HTML says what is on the page, CSS says how it looks, and JavaScript makes it react.
Think of it like this
Building a house. HTML is the structure: walls, doors, rooms. CSS is the decoration: paint, wallpaper, furniture placement. JavaScript is the electricity: switches that turn lights on, a doorbell that rings when pressed.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- HTML
- HyperText Markup Language: the language that marks up what each part of a page is (heading, paragraph, link).
- CSS
- Cascading Style Sheets: the language that sets how things look (colour, size, position).
- JavaScript
- The programming language that runs in the browser and makes pages react and change.
- Markup
- Labels put around content to say what it is, like
<h1>around a title. - Element
- One piece of a page, like a heading or a paragraph, written with tags.
- Stylesheet
- A set of CSS rules, either in the page or in a separate
.cssfile.
Step by step
01Start with plain HTML
Here is a heading, a paragraph and a button. With HTML alone the browser uses its default look: black text, a serif font, a plain grey button that does nothing yet.
<h1>My counter</h1>
<p>Clicks: <span id="count">0</span></p>
<button id="add">Add one</button>02Add CSS for the look
CSS picks elements and sets their properties. Nothing about the content changes, only its appearance.
body { font-family: sans-serif; }
h1 { color: rebeccapurple; }
button { padding: 8px 16px; border-radius: 8px; }03Add JavaScript for behaviour
JavaScript finds the button, listens for clicks, and updates the number. Now the page responds to you.
let count = 0;
document.getElementById("add").addEventListener("click", () => {
count = count + 1;
document.getElementById("count").textContent = count;
});04See all three together
The live example below has three tabs: HTML, CSS and JavaScript. Switch between them and edit each one. Notice how a change in one tab only affects its own job.
Try it yourself
- 1
Change the look only
In the first example's CSS tab, change
rebeccapurpletotomato. Only colours change; the button still counts. - 2
Change the behaviour only
In the JavaScript tab, change
count + 1tocount + 10. The look stays the same, but each click now adds ten. - 3
Remove a job
Empty the JavaScript tab and click the button: nothing happens. The page still shows, because HTML and CSS don't need JavaScript.
Code & diagrams
Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Misspell the element the script looks for
In the JavaScript tab, change getElementById("add") to getElementById("ad").
Myth vs fact
Myth
HTML is a programming language.
Fact
HTML is a markup language: it describes content. It has no variables, loops or calculations. JavaScript is the programming language of the web.
Myth
Java and JavaScript are related.
Fact
They are different languages with different uses. The similar name was a marketing choice in 1995. (Hectal has a separate Core Java course.)
Myth
You should use CSS or JavaScript to fix bad HTML.
Fact
Start with correct, meaningful HTML. CSS and JavaScript work best, and pages are most accessible, when the HTML underneath is right.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Pages that work with HTML alone and add CSS and JavaScript on top are called progressively enhanced: if a script fails to load, the core content and forms still work.
- ▸
Search engines and screen readers mainly read your HTML. Good HTML is the cheapest SEO and accessibility win there is.
- ▸
In the browser, HTML becomes the DOM (a tree of objects), CSS becomes the CSSOM, and the two combine into the render tree used for layout. JavaScript changes the page by changing the DOM.
Remember this
- 1
HTML (HyperText Markup Language) describes the content and its meaning: this is a heading, this is a paragraph, this is a link, this is an image. It is a markup language, not a programming language: it labels content, it doesn't calculate anything.
- 2
CSS (Cascading Style Sheets) describes presentation: colours, fonts, sizes, spacing and layout. The same HTML can look completely different with a different stylesheet.
- 3
JavaScript is a real programming language. It can react to clicks and typing, change the page after it has loaded, fetch new data from a server, and remember things. Without it, a page can still show content, but it can't respond to you beyond following links and sending forms.
- 4
Keeping the three jobs separate is a core habit: content in HTML, looks in CSS, behaviour in JavaScript. It makes pages easier to change, faster to load and better for people using screen readers and for search engines, which read your HTML to understand the page.
- 5
Learn them in that order. HTML first (this course), then CSS, then JavaScript. Each one builds on the one before: CSS styles HTML elements, and JavaScript finds and changes HTML elements.
Explain it without notes
Describe the job of HTML, CSS and JavaScript in one sentence each.
Why is it a good idea to keep content, looks and behaviour in separate languages?
Practice
In the first example, add a second button with id reset and text Reset. Don't make it work yet: just add it in HTML and check it appears with the same style as the first button.
Make the reset button work: when clicked, set the count back to 0.
Trade-offs
- ↔
Doing something in JavaScript that HTML or CSS can do (like a hover effect) adds code that can break and slow the page; use the simplest language that does the job.
Done when you can
I can say what HTML, CSS and JavaScript each do.
I can point to which tab to edit to change content, looks or behaviour.
I know HTML is markup and JavaScript is a programming language.
I know why the three jobs are kept separate.