Woraus eine Seite besteht

Eine Webseite besteht aus drei Arten von Dateien. Das war vor dreißig Jahren so und ist es heute noch, egal wie viele Werkzeuge dazwischenliegen.

Man kann sie sich als Haus vorstellen. Erst steht das Mauerwerk, dann kommt der Anstrich, dann werden die Lichtschalter angeschlossen. Kein Anstrich ohne Wand, kein Schalter ohne Leitung.

Die erste Datei beschreibt, was auf der Seite steht und was es bedeutet: eine Überschrift, ein Absatz, eine Liste, ein Formular, ein Bild.

Ein Beispiel:

<h1>Wie das Web funktioniert</h1>
<p>Zwei Wochen, danach verstehst du, worüber alle reden.</p>
<a href="/kurse">Alle Kurse ansehen</a>

Drei Zeilen, drei Bedeutungen: eine Hauptüberschrift, ein Absatz, ein Verweis. Ein Browser kann daraus schon eine benutzbare Seite machen, ohne dass irgendwo eine Farbe steht.

Das ist kein Zufall, sondern der wichtigste Gedanke hinter HTML: Die Bedeutung kommt zuerst. Eine Suchmaschine liest sie, ein Vorleseprogramm für blinde Nutzer liest sie, ein Browser mit ausgeschaltetem Rest liest sie.

Die zweite Datei sagt, wie das Ganze aussehen soll: Farben, Abstände, Größen, Anordnung.

h1 {
  font-size: 2.5rem;
  color: #101014;
}

Der Teil vor der Klammer sagt, für wen die Regel gilt. Der Teil darin sagt, was gelten soll. Mehr ist es im Kern nicht, auch wenn eine große Anwendung Tausende solcher Regeln hat.

Wichtig ist die Trennung: Das Aussehen liegt in einer eigenen Datei. Ändert sich das Erscheinungsbild, ändert sich der Inhalt nicht mit, und umgekehrt.

Die dritte Datei bringt der Seite bei, auf Dinge zu reagieren: einen Klick, eine Eingabe, ein Ergebnis vom Server.

document.querySelector("button").addEventListener("click", () => {
  document.querySelector("#hinweis").textContent = "Gespeichert.";
});

Übersetzt: Suche die Schaltfläche, und wenn jemand darauf klickt, schreibe "Gespeichert" in das Element mit der Kennung hinweis.

Man kann eine Seite so bauen, dass ohne JavaScript nichts geht. Viele tun das. Und es gibt Anwendungen, bei denen das vertretbar ist.

Aber es hat Preise, und die zahlt man später. Eine Seite, deren Inhalt erst durch JavaScript entsteht, ist beim ersten Laden für eine Weile leer. Das ist die Zeit, in der Nutzer abspringen, und es ist die Zahl, die Google als Ladezeit misst.

Außerdem: JavaScript kann fehlschlagen. Ein Netzwerkfehler, ein Werbeblocker, ein alter Browser. HTML und CSS schlagen praktisch nie ganz fehl.

Der Browser lädt zuerst das HTML. Darin stehen Verweise auf die anderen beiden Dateien. Er holt sie nach, wendet die CSS-Regeln an und führt das JavaScript aus.

Deshalb sind Position und Art dieser Verweise ein echter Hebel für die Ladezeit. Ein Stilblatt blockiert das Zeichnen, bis es da ist. Ein Skript blockiert das Lesen des HTML, wenn man es nicht ausdrücklich anders angibt. Beides fällt in der Spur über Leistung ausführlicher an.