Was eine Webseite ist

Jede Seite, die du öffnest, beginnt als einfache Textdatei. Klick mit der rechten Maustaste auf fast jede Seite, wähle „Seitenquelltext anzeigen“, und du kannst das HTML lesen, das der Server geschickt hat.

Eine Seite ist eine Textdatei

Wenn du eine Adresse in den Browser tippst, fragt der Browser einen Server nach einer Datei und bekommt einfachen Text zurück. Dieser Text ist in HTML geschrieben, der HyperText Markup Language. Der Browser liest ihn von oben nach unten, findet heraus, welche Teile Überschriften, Absätze, Links und Bilder sind, und zeichnet dann die Seite, die du siehst. Das kannst du auf fast jeder Website prüfen: Klick mit der rechten Maustaste auf die Seite und wähle „Seitenquelltext anzeigen“. Hinter den Farben und dem Layout steckt eine lange, lesbare Textdatei.

HTML ist eine Auszeichnungssprache, keine Programmiersprache. Es kennt keine Schleifen und rechnet nicht. Seine Aufgabe ist es, Inhalte zu kennzeichnen: Diese Zeile ist die Hauptüberschrift, diese drei Zeilen sind eine Liste, diese Wortgruppe verlinkt auf eine andere Seite. Zwei weitere Sprachen sind meist mit dabei. CSS bestimmt, wie etwas aussieht (Farben, Schriften, Abstände, Layout), und JavaScript lässt die Seite auf Klicks und Eingaben reagieren. Dieser Kurs behandelt die erste Schicht. Der CSS-Kurs behandelt die zweite.

Das Grundgerüst jeder Seite

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

Die erste Zeile, <!DOCTYPE html>, ist ein Überbleibsel aus der Frühzeit des Webs. Ihre einzige Aufgabe heute: Sie sagt dem Browser, dass er den Standardmodus verwenden soll und nicht einen alten Kompatibilitätsmodus, der die Fehler von Browsern aus den 1990er-Jahren nachahmt. Lass sie also immer stehen. Danach kommt das Element <html>, das das ganze Dokument umschließt. Sein Attribut lang nennt die Sprache der Seite. Screenreader wählen damit die richtige Aussprache, und Übersetzungswerkzeuge wissen dadurch, was sie übersetzen.

Innerhalb von <html> gibt es zwei Teile. <head> enthält Informationen über die Seite, die nicht auf der Seite selbst gezeichnet werden. <meta charset="utf-8"> gibt an, welche Zeichenkodierung die Datei verwendet. UTF-8 kann die Zeichen jedes Schriftsystems speichern, auch Koreanisch, sodass Text nicht zu seltsamen Symbolen wird. <title> ist der Name, der im Browser-Tab, in Lesezeichen und in Suchergebnissen erscheint, und das Erste, was ein Screenreader beim Öffnen der Seite ansagt. <body> enthält alles, was auf dem Bildschirm erscheint.

Vom Text zum Baum

Der Browser behält dein HTML nicht als eine lange Zeichenkette. Er zerlegt es in einen Baum aus Objekten, das DOM, das Document Object Model. Jedes Element wird zu einem Knoten, und Elemente, die in einem anderen Element stehen, werden zu dessen Kindern. In der Abbildung unten ist title ein Kind von head, und h1 und p sind Kinder von body. CSS-Selektoren und JavaScript arbeiten beide mit diesem Baum. Auch deshalb kommt es auf sorgfältiges Verschachteln an.

Browser sind nachsichtig. Wenn du ein schließendes Tag vergisst, folgt der Parser Reparaturregeln aus dem HTML-Standard und baut trotzdem einen Baum. Der reparierte Baum ist aber vielleicht nicht der, den du gemeint hast. Wer sich angewöhnt, die Struktur gleich richtig zu schreiben, spart sich später viel ratloses Fehlersuchen.

Wer die Regeln schreibt

Tim Berners-Lee schrieb im März 1989 am CERN den ersten Vorschlag für das World Wide Web, und Ende 1990 liefen dort der erste Webserver und der erste Browser. Seitdem ist HTML stark gewachsen. Heute wird es durch den HTML Living Standard festgelegt, den die WHATWG pflegt, eine Gruppe, die von Browserherstellern gegründet wurde. 2019 einigten sich das W3C und die WHATWG darauf, gemeinsam an dieser einen Fassung zu arbeiten. „Living“ heißt, dass das Dokument keine Versionsnummern hat und laufend aktualisiert wird. Der Name HTML5, den du in Büchern noch findest, ist also nur eine lockere Bezeichnung.

Der Editor unten funktioniert wie ein winziger Browser. Tipp links, und das Ergebnis erscheint kurz darauf rechts. Abspielen zeichnet das Ergebnis sofort neu. Wenn du glaubst, fertig zu sein, drück Prüfen: Die Seite führt ein paar Tests mit deinem HTML aus und sagt dir, welche noch fehlschlagen. Von vorn holt den Anfangscode zurück.