Das Grundgerüst

Bisher hast du einzelne Elemente geschrieben, eine Überschrift und einen Absatz. Eine echte HTML-Datei hat aber immer einen festen Rahmen darum herum, egal wie groß die Seite später wird. Diesen Rahmen schaust du dir jetzt an, bevor es mit den Bausteinen weitergeht.

So sieht er aus, vollständig und in der Reihenfolge, in der er in jeder Datei steht:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Sichtbarer Inhalt</h1>
  </body>
</html>

Anders als sonst ist das hier eine ganze Datei und kein Ausschnitt. Hol ihn dir in den Editor und schau auf die erste Zeile: Wo <!DOCTYPE html> steht, hast du ein vollständiges Dokument vor dir. Dem dritten Codeblock dieser Lektion fehlt sie, und warum, klärt sich am Ende.

01 / 04Die ersten beiden Zeilen

<!DOCTYPE html> ist kein Tag, sondern eine Ansage an den Browser: Das hier ist modernes HTML, bitte auch so behandeln. Fehlt sie, kann der Browser in einen alten Kompatibilitätsmodus fallen, den sogenannten Quirks Mode. Da gelten Rendering-Regeln von vor zwanzig Jahren, und du suchst dann stundenlang nach Fehlern, die keine sind. Die Zeile ist kurz, steht immer ganz oben und wird einfach nie weggelassen.

Ausprobieren lässt sich das hier allerdings nicht: Die Seite im Reiter Browser läuft immer im modernen Modus, ob du die Zeile schreibst oder weglässt. Das liegt an der Bauweise dieser Lektionsansicht und nicht an deinem Code. Wenn du den Unterschied sehen willst, brauchst du eine eigene Datei auf deinem Rechner; in der Eingabezeile der Console beantwortet document.compatMode die Frage, CSS1Compat heißt modern und BackCompat heißt Quirks Mode.

Danach kommt <html>. Das ist das Wurzelelement, in dem alles andere steckt: Es öffnet ganz oben und schließt ganz unten, und dazwischen liegt die komplette Seite. Das lang="de" sagt, dass die Seite auf Deutsch ist. Das ist keine Kosmetik: Screenreader wählen danach die Aussprache, Browser das Angebot zum Übersetzen, und die Rechtschreibprüfung in Formularfeldern richtet sich ebenfalls danach. Google sagt von sich selbst, dass es die Sprache am sichtbaren Text erkennt und lang dafür nicht heranzieht. Für jemanden mit Screenreader ist das Attribut trotzdem der Unterschied zwischen verständlich und Kauderwelsch.

Was da hinter dem Tag-Namen steht, lang="de", ist ein Attribut. Wie Attribute allgemein funktionieren, siehst du in Lektion 6 dieses Abschnitts. Für jetzt reicht: Es sind Zusatzinfos, die im öffnenden Tag mitgegeben werden.

02 / 04Der Kopf ist unsichtbar

Der head enthält Informationen über die Seite, nicht die Seite selbst. Drei Einträge stehen praktisch immer drin:

• <meta charset="UTF-8"> legt die Zeichenkodierung fest. UTF-8 kennt Umlaute, Eszett, Akzente und Emojis. Ohne diese Angabe rät der Browser, und aus „Grüße“ wird schnell „Grüße“. Deshalb steht die Zeile als Erstes im head, noch vor dem Titel. Hier kannst du das nicht nachstellen: Der Browser bekommt deinen Code fertig gelesen übergeben und muss gar nichts raten. In einer eigenen Datei siehst du es sofort.
• <meta name="viewport" ...> sorgt dafür, dass die Seite auf dem Handy in Gerätebreite dargestellt wird. Ohne sie zeigt das Smartphone die Seite in Desktop-Breite an, und alles ist winzig.
• <title> ist der Seitentitel. Er steht im Browser-Tab, im Lesezeichen und als Überschrift in Suchergebnissen.

Jetzt die Gegenprobe. Hier sind Beschreibung, Favicon und eine Stylesheet-Verknüpfung dazugekommen, der head ist doppelt so lang:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Rezepte, die unter der Woche klappen.">
    <title>Mein Kochblog</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <h1>Sichtbarer Inhalt</h1>
  </body>
</html>

Auf der Seite: derselbe eine Satz wie vorher. Genau das ist der Punkt. Was im head steht, sieht der Nutzer nie direkt, es wirkt trotzdem.

03 / 04Der Körper ist sichtbar

Alles, was auf der Seite zu sehen sein soll, steht im body: Überschriften, Absätze, Bilder, Links, Formulare. In beiden Beispielen ist das genau eine Zeile, und genau die eine Zeile steht auf der Seite.

Weil alles ineinander steckt, entsteht wieder ein Baum: html ganz oben, darunter die beiden Kinder head und body, und darin deine Inhalte. Die Einrückung im Beispiel macht diesen Baum lesbar. Dem Browser ist sie egal, dir in vier Wochen nicht.

04 / 04Wo du in diesem Kurs arbeitest

Und jetzt der letzte Codeblock dieser Lektion:

<h1>Sichtbarer Inhalt</h1>

Da steht dieselbe Überschrift wie in den anderen beiden, aber ohne Rahmen: kein DOCTYPE, kein html, kein head. Die Seite sieht trotzdem gleich aus.

Der Grund: In diesem Kurs schreibst du fast immer nur den Inhalt des body. Das Grundgerüst steht dabei unsichtbar drumherum, du musst es nicht jedes Mal abtippen. So bleibt der Blick auf dem Thema der Lektion, statt auf acht Zeilen Rahmen, die sich nie ändern.

Woran du es erkennst: Steht im Editor schon ein Gerüst mit <!DOCTYPE html>, html, head und body, arbeitest du an einer ganzen Datei. Steht dort nur ein Stück Inhalt, liegt das Gerüst unsichtbar drumherum. Und wenn eine Aufgabe dich ausdrücklich nach dem DOCTYPE fragt, wie gleich die nächste, schreibst du die ganze Datei. In der Challenge gleich schreibst du das Gerüst selbst, danach bleibt es lange beim Ausschnitt, bis der head später einen eigenen Abschnitt bekommt.

Wenn du später eine eigene Datei auf deinem Rechner anlegst, brauchst du das Gerüst wieder von Hand. Die gute Nachricht: Es ist immer dasselbe. Jeder Editor legt es dir auf Tastendruck an, und nach dem dritten Mal tippst du es ohnehin aus dem Kopf.