HTML, CSS, and JavaScript: Three Jobs, Three Languages

The response body from Phase 2 was HTML - but HTML alone gives you a plain, unstyled, static document. Real pages layer on two more languages, each with one job. Mixing them up is the single most common source of confusion for anyone starting out, so here's the split, made concrete on one small page.

Three jobs

• HTML (structure) - what exists on the page and what it means: this is a heading, this is a button, this is a list. HTML answers "what is this thing," never "what does it look like" or "what does it do when clicked."
• CSS (presentation) - how the structure looks: colors, spacing, fonts, layout. CSS never adds content and never decides what happens on a click - only appearance.
• JavaScript (behavior) - what happens over time: responding to clicks, changing content after the page loaded, talking to a server for new data. JavaScript is the only one of the three that can react to anything.

📝 Terminology. This split has a name: separation of concerns. Each language owns one responsibility, and a well-built page keeps them from bleeding into each other - structure in HTML, look in CSS, interactivity in JS.

One page, annotated

Here's a small newsletter signup box, showing all three doing their own job:

<div class="signup">
  <h2>Get the newsletter</h2>
  <input type="email" id="email" placeholder="[email protected]">
  <button id="subscribe-btn">Subscribe</button>
  <p id="status"></p>
</div>

This is pure structure. A heading, a text input, a button, an empty paragraph reserved for a message later. No color, no font, no click handling - only "here's what exists and what each piece is."

.signup {
  padding: 24px;
  background: #f4f4f8;
  border-radius: 8px;
}
.signup button {
  background: #3457d5;
  color: white;
  border: none;
  padding: 8px 16px;
}

This is pure presentation. It takes the exact same structure and gives it a light gray card background, rounded corners, and a blue button with white text. Delete this CSS entirely and the signup box still works - it renders as plain black text on white with a default gray button.

document.getElementById("subscribe-btn").addEventListener("click", function () {
  var email = document.getElementById("email").value;
  document.getElementById("status").textContent = "Subscribed: " + email;
});

This is pure behavior. Nothing happens until the button is clicked - HTML and CSS are both static and sit there unchanged until this code runs. When the click happens, JavaScript reads the input's value and updates the status paragraph. This snippet is illustrative, not meant to run standalone here - the next guides show it running for real.

💡 Key point. Delete the CSS and the page still functions, only uglier. Delete the JavaScript and the page still displays, it stops responding to clicks. Delete the HTML and there's nothing left for the other two to act on. HTML is the foundation the other two attach to.

⚠️ Gotcha. It's possible to write CSS that fakes interactivity (a :hover color change) or HTML that carries inline styling (style="color: red") or inline scripting (onclick="..."). All three work, and all three blur the separation this phase drew. As you get further into CSS and JavaScript, keeping structure, presentation, and behavior in their own files - not tangled inline - is what keeps a real page maintainable.

Where to go next

You now know what each language is responsible for. The next three guides each go deep on one:

• HTML From Zero - every structural element, written properly.
• CSS Without Tears - selectors, the box model, and how presentation rules actually cascade.
• The DOM Explained - how JavaScript reaches into the page HTML built and changes it live, which is what that addEventListener call above was actually doing.

Start with HTML - everything else in this category attaches to it.

Check the three-way split sticks before moving on:

[
  {
    "q": "Which language decides what happens when a button is clicked?",
    "choices": ["HTML", "CSS", "JavaScript"],
    "answer": 2,
    "explain": "Only JavaScript can react to events like clicks. HTML defines the button exists; CSS defines how it looks."
  },
  {
    "q": "If you delete all the CSS from a working page, what happens?",
    "choices": ["The page disappears entirely", "The page still shows content, only unstyled", "The JavaScript stops running"],
    "answer": 1,
    "explain": "CSS only controls appearance. The structure (HTML) and behavior (JS) are unaffected by removing it."
  },
  {
    "q": "What is 'separation of concerns' referring to in this phase?",
    "choices": ["Splitting a site across multiple servers", "Keeping structure, presentation, and behavior in their own languages", "Using multiple browsers to test a page"],
    "answer": 1,
    "explain": "It's the practice of giving HTML, CSS, and JS each their own single responsibility instead of mixing them."
  }
]

← Phase 2: URLs, DNS, and HTTP, Together · Guide overview