Contents
  1. The three layers of the web
  2. HTML's job
  3. CSS's job
  4. JavaScript's job
  5. Why separation matters
  6. When to use what

The three layers of the web

Every website is built from three technologies that each have a distinct role. Understanding the boundary between them is fundamental to writing clean, maintainable code.

HTML's job: Structure and content

HTML defines what exists on the page and what it means. It answers the question: what is this?

<article>
  <h1>Getting started with HTML</h1>
  <p>HTML is the backbone of every web page.</p>
  <img src="html-diagram.png" alt="HTML document structure">
</article>

HTML should contain no styling and minimal behaviour. Presentational attributes like bgcolor, align, font, and border are obsolete — all styling belongs in CSS.

CSS's job: Presentation and layout

CSS controls how things look and where they're positioned. It answers: how does this appear?

article {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px;
}
h1 {
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem;
  color: #1f2937;
}

JavaScript's job: Behaviour and interactivity

JavaScript makes pages dynamic and interactive. It answers: what does this do?

const btn = document.getElementById('formatBtn');
btn.addEventListener('click', function() {
  const input = document.getElementById('htmlInput').value;
  // format and display result
});

JavaScript should not be used to set styles directly (other than dynamic values like scroll position). Use CSS classes instead — JavaScript adds/removes classes, CSS defines what those classes look like.

Why separation matters

When to use what