HTML, CSS, and JavaScript: the three roles of the web interface

Objectives

By the end of the lesson, you can distinguish the tasks of HTML, CSS, and JavaScript, you can decide which of them a requirement belongs to, and you understand why client-side validation is not enough to protect the rules.

Why three separate languages?

A web page looks like a uniform interface, but the browser processes three resources of different kinds. There is a practical reason for the separation: the content, the appearance, and the behavior are modified for different purposes and by different people. If, while editing the text, we accidentally broke the layout, or a color change risked the operation, the system would be fragile. Separating the three roles also makes it possible for the browser (and assistive technology and search engines) to interpret the content even if the appearance or the behavior is missing.

flowchart LR
    H["HTML: structure and meaning"] --> O[Usable interface]
    C["CSS: appearance"] --> O
    J["JavaScript: behavior"] --> O

The diagram shows cooperation, not that all three are mandatory on every page. A simple document is readable with HTML alone.

HTML: what does the content mean?

HTML is a descriptive language: with elements it marks which part of the text is a heading, paragraph, list, link, button, or form. The browser builds the document from it. HTML does not describe the color of the letters or their exact place on the screen, but what is what.

The skeleton of a course page in Kurzuspont:

<main>
  <h1>Web Programming 1</h1>
  <p>The course covers the basics of how the web works.</p>
  <a href="/enrol">Enrol</a>
</main>

main marks the main content, h1 the main heading, p the paragraph, a the link. The meaning of elements is useful not only for sighted readers: the browser, the search engine, and the screen reader rely on it too. Chapter 9 discusses this in detail.

CSS: how should it appear?

CSS (Cascading Style Sheets) describes the appearance with rules: color, font size, spacing, layout, and also how to adapt to different displays.

main { max-width: 48rem; margin: auto; }
h1   { color: #17365d; }

A rule consists of a selector (what it applies to) and declarations (what it sets). The "cascading" in the name means that if several rules apply to the same element, the browser decides by defined rules (specificity, order, inheritance) which one takes effect. CSS is not mere decoration: readable line spacing, adequate contrast, and a layout that also works on a narrow screen decide whether the information is usable.

JavaScript: how should the interface react?

JavaScript is a programming language. Code running in the browser can listen to user events (click, key), modify the document, and request new data from the server. A course search, for example, can update the result list when filtering, without loading a new page.

A small example: hiding the items of the result list if they do not match the typed text.

const field = document.querySelector("#search");
field.addEventListener("input", () => {
  const text = field.value.toLowerCase();
  for (const row of document.querySelectorAll(".course")) {
    row.hidden = !row.textContent.toLowerCase().includes(text);
  }
});

We cannot run this code without a browser (the document object is part of the browser). We checked its syntax but did not run its behavior; the purpose of the code is to illustrate the role.

Progressive enhancement

The three roles give a natural order: the content is built in HTML, the appearance in CSS, the convenience features in JavaScript. This principle is progressive enhancement: the most important content and basic operation should work even if a later layer does not arrive or is faulty. We discuss it in detail in lesson 3.5.

This does not mean that every application can be complete without JavaScript: a browser-based diagram editor is built on a different basis than a course description. The right question is: what does each function need, and what happens if one of the resources does not arrive?

Worked example: the course page of Kurzuspont

Requirement	Which layer?
The name of the course should appear as a main heading	HTML (h1)
"Enrol" should be a link	HTML (a)
The heading is dark blue, the text is at most 48 rem wide	CSS
On a phone the layout should be single-column	CSS
Filter the course list while typing	JavaScript
Check the free places before enrolling	Server (JavaScript can only signal)

The last row shows that protecting the rules is not the job of the three browser layers.

Common misconceptions

Statement	Clarification
"HTML is just a sketch of the look."	Besides structure, it also gives the meaning of the elements.
"CSS is just decoration."	It also determines readability and adaptive layout.
"Every modern page needs a lot of JavaScript."	The task determines how much behavior is needed.
"Client-side validation is enough."	The server must check the important rules too.
"HTML is a programming language."	It is a markup language: it describes structure, not instructions.

In brief

• HTML gives structure and meaning, CSS gives appearance, JavaScript gives behavior.
• Separating the three roles keeps the interface maintainable and interpretable in many environments.
• CSS rules consist of a selector and declarations; when several rules conflict, a defined order decides.
• Client-side validation is not protection: the rules must be enforced on the server too.
• Progressive enhancement protects the basics: content first, convenience later.

Review questions

1. Which layer does it belong to: whether a text is a heading, or what color it is?
2. What does the word "cascading" mean in the name of CSS?
3. Why is it not enough to check the prerequisite of enrolment in JavaScript?
4. What does it mean that a page can be progressively enhanced?

Learning resources

• Basic HTML syntax (MDN) — HTML basics.
• Document Object Model (MDN) — how JavaScript reaches the document.