HTML vs CSS vs JavaScript

Three layers of the web — what each one does and why beginners confuse them.

Definition

The web rests on three technologies. Each one has one job — together they make every site you've ever visited.

Layer	Job	Mental model
HTML	Structure / Content	The noun — what the page IS
CSS	Presentation / Style	The adjective — how it LOOKS
JavaScript	Behaviour / Logic	The verb — what it DOES

Beginners often try to cram styling into HTML (<font color="red">) or layout into JS. Keep the layers separate — each does one thing well.

HTML, CSS, JavaScript — Three Layers

Hello World — End to End

html
<!DOCTYPE html>
<html>
  <head>
    <!-- CSS — presentation -->
    <style>
      body { font-family: sans-serif; background: #0f172a; color: white; padding: 2rem; }
      .btn { background: #fbbf24; color: black; padding: 0.5rem 1rem; cursor: pointer; }
    </style>
  </head>
  <body>
    <!-- HTML — structure -->
    <h1>Click counter</h1>
    <button class="btn" id="btn">Click me</button>
    <p>Clicks: <span id="count">0</span></p>

    <!-- JavaScript — behaviour -->
    <script>
      let n = 0;
      document.getElementById("btn").onclick = () => {
        n++;
        document.getElementById("count").textContent = n;
      };
    </script>
  </body>
</html>

HTML says "there's a button + a paragraph + a span".
CSS says "make the body dark and the button yellow".
JS says "when the button is clicked, increment the count".

Side-by-side

Question	HTML	CSS	JavaScript
Has tags?	`<h1>`, `<p>`, `<form>`	Selectors (`h1 {}`)	No tags — code
File extension	`.html`	`.css`	`.js`
Loaded via	`<html>` opens it	`<link rel="stylesheet">`	`<script>`
Can run alone?	Yes — browser renders	No — needs HTML	No — needs HTML

Common Mistakes

Style in HTML: <font color="red"> — replaced by CSS color: red.
Behaviour in HTML: <a href="javascript:..."> — replaced by addEventListener.
Layout in JS: setting el.style.width = "200px" everywhere — use CSS classes + JS toggling them.

Interview Questions

Practice Exercises

No CSS — Strip all styles from a webpage. Hint: remove <link> and <style>. Page still works.
No JS — Disable JavaScript in DevTools and reload your favourite site. Hint: many features still function.
Refactor — Find any inline style="..." in your code → move into a CSS file. Hint: separation wins.

💡 Think Like a Programmer: Three layers, three responsibilities. Mix them up and your code becomes spaghetti. Keep them separate and any layer can be replaced without touching the others.

AI-powered recap