HTML vs CSS vs JavaScript, and what each one does

What each language is responsible for

Each language answers a different question about the page.

HTML (HyperText Markup Language) answers what is this? It labels content as headings, paragraphs, links, images, lists, tables and forms, and without it there is nothing on screen at all. CSS (Cascading Style Sheets) answers how should it look? Colours, fonts, spacing, sizes and positions are all CSS, and so is the way a design rearranges itself on a narrow phone. JavaScript answers what happens when...? It reacts to clicks, key presses and timers, changes the page after it has loaded and can fetch fresh data without a reload.

The split has a name, separation of concerns (opens in a new tab), and it pays off in two ways. You can redesign a whole site by editing only the CSS, or add a feature in JavaScript, and the content stays untouched. And when the CSS fails to load on a bad train connection, or someone has JavaScript turned off, the content is still there to read. Screen readers and search engines benefit from that as well.

The house analogy, and where it breaks

Think of a house. HTML is the walls, floors, doors and rooms; it decides that there is a kitchen, a bedroom and a front door, and how you get from one to the other. CSS is the paint, the wallpaper, the furniture and the lamps, and one weekend of redecorating can make the same rooms unrecognisable. JavaScript is the wiring and plumbing, the parts that do something when you use them. Flip a switch and the light comes on. Press the bell and it rings.

You can live in a house with bare plaster walls. You cannot live in a heap of paint tins and cable with no walls. Pages work the same way: HTML on its own is a usable page, while CSS and JavaScript have nothing to act on without it. So HTML comes first.

The analogy has a weak spot, though. HTML has some behaviour of its own. Links navigate, forms check their input, and the <details> element opens and closes with no script at all.

Start with the HTML for a quiz card

The quiz card shows a question and a button, and reveals the answer when you click. First, the HTML, which holds all of the content and says what each piece is:

<section class="card">
  <h2>Quick quiz</h2>
  <p>Which HTML element makes a numbered list?</p>
  <button type="button" id="reveal">Show answer</button>
  <p id="answer" hidden>The ol element (ordered list).</p>
</section>

In a browser this gives you a heading, a question and a button in default browser style: black Times-like text and a small grey button. The answer is in the page, but the hidden attribute keeps it off screen. Click the button and nothing happens, since there is no behaviour yet.

Look at the attributes. class="card" gives the CSS a name to aim at, and the two id values let JavaScript find exactly the elements it needs. The HTML supplies the hooks that the other two languages grab.

Add CSS to make it look finished

Next comes the CSS. It can sit in a <style> element in the head, or, on a real site, in a separate .css file linked with <link rel="stylesheet" href="style.css">. When a stylesheet gets messy, an online formatter such as CSS Editor (opens in a new tab) can tidy or minify it.

.card {
  max-width: 320px;
  padding: 16px;
  border: 2px solid #4a6cf7;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
}
.card h2 {
  margin-top: 0;
  color: #4a6cf7;
}
#reveal {
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: #4a6cf7;
  color: #fff;
}

Each rule is a selector, which picks the elements, followed by declarations, which are property and value pairs. The card now has a blue border, rounded corners, breathing room, a modern font and a coloured button. Not one word of content changed. If a rule seems to do nothing, paste the stylesheet into the W3C CSS Validation Service (opens in a new tab) to find the typo.

The button still does nothing. CSS can change how it looks on hover or focus, but it cannot respond to a click by showing text that the HTML marked hidden. That takes the third language.

Add JavaScript to make the button work

Six lines of JavaScript, in a <script> element at the end of the body or in a separate .js file:

const button = document.getElementById("reveal");
const answer = document.getElementById("answer");
button.addEventListener("click", function () {
  answer.hidden = false;
  button.disabled = true;
});

The script looks up the button and the answer by id, waits for a click, then clears the hidden state so the answer appears and disables the button so it cannot be clicked twice. Find an element, listen for an event, change something: most browser JavaScript (opens in a new tab) is some version of that pattern.

Now take the layers away one at a time. Without the JavaScript you still have a readable card. Without the CSS you have a plain but working quiz. Without the HTML you have nothing. Paste all three parts into one page in the playground and try it, or put them in three side-by-side panes in an online HTML, CSS and JS editor (opens in a new tab). (Lesson previews on this site do not run scripts. A page you open from your own computer will.)

The three languages side by side

The times assume 30 to 60 minutes of practice a day, and they are rough. HTML is small and you can get comfortable with it fast. CSS layout and JavaScript take longer because there is simply much more of each.

Linking the CSS and JavaScript files

On a real site the three languages live in separate files, and the HTML pulls in the other two. The stylesheet link goes in the head so the styles are ready before anything is drawn. The script tag often goes in the head too, with the defer attribute, which tells the browser to run it once the HTML has been parsed:

<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

Every page on the site can share that one stylesheet and one script, so changing the button colour once changes it on all 40 pages. The lesson on linking CSS and JavaScript walks through it, and the link and script reference pages list every attribute.

Which to learn first

Learn them in the order the browser needs them: HTML, then CSS, then JavaScript.

1. HTML is the smallest of the three, and the other two both point at it. CSS selectors and JavaScript lookups work by finding HTML elements, so you need to know which elements exist and how they nest. Well-written HTML also gives you accessibility and basic search visibility at no extra cost.
2. Start CSS before you have finished HTML. Once you can build a page with headings, lists, links and images, a bit of styling makes practice more fun. Module 9 of this course, from the style attribute to the box model, is written for that moment.
3. Leave JavaScript for last. It is a full programming language with variables, functions, loops and events, and it is far less confusing when you already understand the page you are changing.

We see one mistake over and over: people jump straight to JavaScript or a framework and never learn HTML properly. The result is pages full of <div> elements with click handlers where a plain <button> or <a> would have worked better, especially for keyboard users. A few weeks of HTML up front saves months of repairs. The HTML learning roadmap shows how to plan those weeks.