Structure, Presentation, Behaviour

What this is. Every web page you have ever used is built from at most three languages, and each one has exactly one job.

HTML describes what the content means: this is a heading, this is a paragraph, this is navigation.

CSS describes how it should look: colour, spacing, typography, layout.

JavaScript describes what it does: reacting to a click, validating a form, fetching data.

✦ Why this separation exists

It would be technically possible to mix all three together. We separate them because a page whose meaning is independent of its appearance can be restyled without being rewritten, read aloud by a screen reader, understood by a search engine, and printed sensibly. Separation is not tidiness for its own sake, it is what makes a page usable in situations you did not anticipate.

The same content, two responsibilities

HTML

<h1>Sankofa Code</h1>
<p>Go back. Bring it forward.</p>

CSS

h1 {
  font-size: 3rem;
  color: #2B1F17;
}
p {
  color: #57493D;
}

Compare → The left column is HTML: it says one of these is the main heading and the other is a paragraph. The right column is CSS: it says how large and what colour. Delete the CSS and the page still makes sense. Delete the HTML and there is nothing to style.

Where this fits. A page can be genuinely useful with HTML alone. Add CSS and it becomes pleasant. Add JavaScript and it becomes interactive. That order matters: it is the order in which the web degrades gracefully when something fails.

LIVE PREVIEW

loading editor…

The editor is on the left and the rendered page is on the right. Change something and the preview updates as you type.

Your turn → Delete everything in the CSS pane. The page still communicates its meaning, it is simply unstyled. That is HTML doing its job alone.

Mark this lesson complete

Your progress is saved on this device. No account needed.

Next: The Shape of Every HTML Document →

← Back