# 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:

```html
<div class="signup">
  <h2>Get the newsletter</h2>
  <input type="email" id="email" placeholder="you@example.com">
  <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."

```css
.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.

```js
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](/guides/html-from-zero)** - every structural element, written properly.
- **[CSS Without Tears](/guides/css-without-tears)** - selectors, the box model, and how presentation
  rules actually cascade.
- **[The DOM Explained](/guides/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:

```quiz
[
  {
    "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."
  }
]
```