Das HTML-Grundgerüst

Das lernst du in dieser Lektion

Du kennst die vier Bausteine jedes HTML-Dokuments: Doctype, html, head und body.
Du weißt, welche Angaben in den head gehören und wo der title überall erscheint.
Du legst mit einem Texteditor deine erste eigene HTML-Datei an und öffnest sie im Browser.
Du schreibst Kommentare und hältst deinen Quelltext sauber eingerückt.

Bisher hast du einzelne HTML-Schnipsel geschrieben – heute baust du das Fundament, auf dem jede echte Webseite steht. So wie ein Brief Anschrift, Anrede und Unterschrift hat, besitzt jedes HTML-Dokument ein festes Grundgerüst aus vier Bausteinen, das auf Milliarden von Webseiten identisch aussieht. Und am Ende dieser Lektion bleibt dein Code nicht mehr nur hier im Kurs-Editor: Du speicherst deine erste eigene HTML-Datei auf deinem Computer und öffnest sie im Browser – eine echte Webseite, ganz ohne Baukasten, von dir selbst geschrieben.

Warum jede Seite ein festes Grundgerüst braucht

Im Try-it-Editor der letzten Lektion hat ein nacktes <h1> scheinbar problemlos funktioniert. Warum also mehr schreiben? Weil der Browser bei einem vollständigen Dokument mehr wissen muss als nur den Inhalt: Nach welcher Fassung des HTML-Standards soll er die Datei interpretieren? In welcher Sprache ist der Text verfasst? Mit welcher Zeichenkodierung wurde die Datei gespeichert? Und welcher Teil ist sichtbarer Inhalt, welcher nur Verwaltungsinformation?

Fehlen diese Angaben, beginnt der Browser zu raten – und rät gelegentlich falsch. Dann werden aus Umlauten kryptische Zeichenfolgen wie „Ã¤“, Screenreader lesen deutschen Text mit englischer Aussprache vor, und im Browser-Tab steht statt eines Titels nur der nackte Dateiname. Das Grundgerüst beantwortet alle diese Fragen in einem guten Dutzend Zeilen. Schauen wir es uns zuerst im Ganzen an:

Das komplette Grundgerüst im Überblick

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
    <p>Ab hier beginnt der sichtbare Inhalt.</p>
  </body>
</html>

Wirkt auf den ersten Blick nach viel – ist aber schnell entschlüsselt. Wir gehen jetzt Zeile für Zeile durch, und du wirst sehen: Jede einzelne hat einen guten Grund. Das Beste daran: Dieses Gerüst lernst du genau einmal und verwendest es dann für jede neue Seite wieder.

Der Doctype: das Startsignal für den Browser

Die allererste Zeile jeder HTML-Datei lautet <!doctype html>. Sie ist streng genommen gar kein HTML-Element – sie hat weder Inhalt noch ein schließendes Tag –, sondern eine Ansage an den Browser: „Dieses Dokument folgt dem aktuellen HTML-Standard. Stelle es nach den aktuellen Regeln dar.“

Dahinter steckt eine kuriose Geschichte: Fehlt der Doctype, schalten Browser bis heute in den sogenannten Quirks-Modus und ahmen aus Rücksicht auf uralte Webseiten absichtlich Darstellungsfehler aus den 1990er-Jahren nach. Deine Seite sähe dann in Details anders aus, als du erwartest – und du würdest lange nach dem Fehler suchen. Früher waren Doctypes außerdem monströs lange Zeilen mit Verweisen auf technische Regelwerke; seit HTML5 genügt die kurze Form. Ob du <!doctype html> oder <!DOCTYPE html> schreibst, ist übrigens egal – Groß- und Kleinschreibung spielt hier keine Rolle.

html, head und body: die große Dreiteilung

Nach dem Doctype folgt das <html>-Element. Es ist das Wurzelelement: Alles andere steckt in ihm drin, und sein schließendes Tag </html> bildet die letzte Zeile der Datei. Wichtig ist sein Attribut lang="de" – es teilt der Welt mit, dass der Inhalt auf Deutsch verfasst ist. Das ist keine Formalie: Screenreader wählen anhand dieser Angabe die richtige Aussprache (deutscher Text, mit englischen Sprachregeln vorgelesen, ist kaum zu verstehen), Browser können eine passende Übersetzung anbieten, und die automatische Silbentrennung funktioniert korrekt. Für eine englische Seite schriebst du entsprechend lang="en".

Direkt im <html>-Element stecken genau zwei Kinder – und ihre Arbeitsteilung ist das wichtigste Konzept dieser Lektion:

Element	Aufgabe	Sichtbar für Besucher?
`<head>`	Der „Briefkopf“: Metadaten, also Informationen über die Seite – Titel, Zeichenkodierung, später auch Verweise auf CSS-Dateien.	Nein – mit einer Ausnahme: Der Inhalt von `<title>` erscheint im Browser-Tab.
`<body>`	Der eigentliche Inhalt: alles, was im Browserfenster erscheint – Überschriften, Absätze, später Bilder und Links.	Ja – vollständig.

Diese Trennung zwischen Metadaten und sichtbarem Inhalt zieht sich durch dein gesamtes HTML-Leben. Wann immer du dich fragst „Wo gehört das hin?“, hilft die Kontrollfrage: Soll es im Browserfenster erscheinen? Dann in den <body>. Beschreibt es die Seite nur? Dann in den <head>. Beide Elemente kommen genau einmal vor, und der <head> steht immer vor dem <body> – erst das Etikett, dann der Inhalt.

Ein Blick in den head: Zeichensatz, Titel, Viewport

Drei Zeilen stecken in unserem <head> – jede mit einer klaren Aufgabe.

<meta charset="utf-8"> legt die Zeichenkodierung fest, also die Übersetzungstabelle zwischen den gespeicherten Bytes und den Buchstaben, die daraus werden. UTF-8 ist die weltweit übliche Kodierung und deckt praktisch alle Schriftsysteme ab – dank dieser Zeile darfst du Umlaute wie ä, ö, ü, das ß, das €-Zeichen und sogar Emojis direkt in deinen Text tippen. Ohne die Angabe kann der Browser die Bytes falsch deuten, und aus „schön“ wird „schÃ¶n“. Die Zeile gehört deshalb ganz nach oben in den <head>.

<title> ist der Titel deiner Seite. Er ist unscheinbar, taucht aber an drei prominenten Stellen auf: als Beschriftung des Browser-Tabs, als Name eines gespeicherten Lesezeichens und – besonders wertvoll – als blaue Hauptzeile deines Eintrags in den Suchergebnissen von Google & Co. Jede Seite braucht darum einen eigenen, aussagekräftigen Titel; „Startseite“ oder „Unbenannt“ verschenkt diese Bühne. Gute Titel nennen zuerst das Thema der konkreten Seite, z. B. „Spaghetti mit Tomatensoße – Omas Kochblog“.

<meta name="viewport" …> ist die Pflichtzeile für Mobilgeräte: Sie sagt Smartphones, dass deine Seite die Bildschirmbreite des Geräts nutzen soll, statt wie eine winzig gezoomte Desktop-Seite zu erscheinen. Die Hintergründe verstehst du später beim Thema responsives Design – für den Moment übernimmst du die Zeile einfach unverändert als festen Bestandteil des Gerüsts.

Zeit zum Ausprobieren. Unten steht zum ersten Mal ein komplettes Dokument im Editor. Ändere den Text im <body> und beobachte die Vorschau. Und dann ändere den <title> – in der Vorschau passiert: nichts! Das ist kein Fehler, sondern die Lektion in Aktion: Der Titel ist Metainformation und erscheint erst im Browser-Tab, wenn du die Seite als echte Datei öffnest. Wie das geht, kommt gleich.

Probier es ausÄndere den Code – die Vorschau aktualisiert sich sofort.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Balkon-Garten – mein erstes Projekt</title>
  </head>
  <body>
    <h1>Mein Balkon-Garten</h1>
    <p>Hier notiere ich, was auf meinem Balkon wächst:
    Tomaten, Basilikum und ein sehr eigenwilliger Rosmarin.</p>
  </body>
</html>

Kommentare: Notizen im Quelltext

Manchmal möchtest du dir selbst etwas in den Quelltext schreiben – eine Erinnerung, eine Erklärung, ein „Hier weitermachen!“. Dafür gibt es Kommentare: Alles zwischen  ignoriert der Browser vollständig.

Kommentare im Einsatz

<!-- Navigation kommt später hierhin -->
<h1>Vereins-News</h1>

<!-- TODO: Datum vor Veröffentlichung prüfen -->
<p>Das Sommerfest findet am 22. August statt.</p>

Kommentare eignen sich für Merkzettel, als Gliederungshilfe in langen Dateien – und um einen Abschnitt vorübergehend „auszuknipsen“, ohne ihn zu löschen: einfach in Kommentarzeichen einpacken, und der Browser tut, als wäre er nicht da. Zwei Einschränkungen solltest du kennen: Kommentare dürfen nicht ineinander verschachtelt werden, und sie sind nicht geheim. Jeder Besucher kann den Quelltext deiner Seite per Rechtsklick und „Seitenquelltext anzeigen“ lesen – Kommentare inklusive. Passwörter oder private Notizen haben dort also nichts verloren.

Schritt für Schritt: deine erste eigene Datei

Jetzt wird es ernst – und wunderbar unspektakulär, denn du brauchst nur zwei Dinge, die du längst hast: einen Texteditor und einen Browser.

Editor öffnen. Die beliebteste kostenlose Wahl ist Visual Studio Code (kurz VS Code) – er hilft dir mit Farben und Vorschlägen. Es geht aber auch ganz ohne Installation: Der Windows-Editor („Notepad“) oder TextEdit auf dem Mac reichen völlig aus. Nur eine Textverarbeitung wie Word ist ungeeignet, weil sie unsichtbare Formatierungen mitspeichert. (TextEdit-Nutzer: vorher im Menü „Format“ auf „In reinen Text umwandeln“ stellen.)
Grundgerüst abtippen. Tippe das Gerüst aus dieser Lektion ab, statt es zu kopieren – so prägt es sich erstaunlich schnell ein. Gib deiner Seite einen eigenen <title> und etwas Inhalt im <body>.
Speichern als meine-seite.html. Entscheidend ist die Endung .html – sie macht aus der Textdatei eine Webseite. Achte beim Speichern darauf, dass als Kodierung UTF-8 eingestellt ist (bei VS Code und aktuellen Windows-Versionen ohnehin der Standard).
Im Browser öffnen. Doppelklicke die Datei – sie öffnet sich im Standardbrowser. Wirf einen stolzen Blick auf den Tab: Dort steht dein <title>.
Der Arbeits-Kreislauf. Ab jetzt gilt der ewige Dreischritt der Webentwicklung: im Editor ändern → speichern (Strg+S bzw. Cmd+S) → im Browser neu laden (F5 bzw. Cmd+R).

Sauber einrücken und verschachteln

Ein letzter Blick auf die Form: Dir ist sicher aufgefallen, dass <head> und <body> in den Beispielen eingerückt sind. Dem Browser ist das egal – er ignoriert Einrückungen komplett. Du machst es trotzdem, und zwar für dich: Eingerückter Code zeigt auf einen Blick, was in was steckt, und in einer Datei mit 300 Zeilen ist das Gold wert. Die übliche Konvention: Jede Verschachtelungsebene rückt um zwei Leerzeichen ein, öffnendes und schließendes Tag eines Elements stehen auf derselben Ebene.

Beim Verschachteln selbst gilt dagegen eine harte Regel: Was zuletzt geöffnet wurde, wird zuerst geschlossen. Elemente dürfen einander nie überlappen – ein Element liegt entweder ganz in einem anderen oder ganz außerhalb.

Verschachtelung: falsch und richtig

<!-- FALSCH: em wird geöffnet, aber p schließt zuerst -->
<p>Das ist <em>wichtig</p></em>

<!-- RICHTIG: zuletzt geöffnet, zuerst geschlossen -->
<p>Das ist <em>wichtig</em></p>

Browser versuchen zwar, solche Fehler stillschweigend zu reparieren – aber jede Reparatur ist ein Ratespiel mit ungewissem Ausgang. Gewöhne dir saubere Verschachtelung von Anfang an an, dann musst du sie dir nie mühsam antrainieren.

Zusammenfassung

Jede HTML-Datei beginnt mit <!doctype html> – dem Signal an den Browser, den aktuellen Standard statt des Quirks-Modus zu verwenden.
<html lang="de"> ist das Wurzelelement; das lang-Attribut steuert Aussprache im Screenreader, Übersetzungsangebote und Silbentrennung.
Der <head> enthält unsichtbare Metadaten, der <body> den sichtbaren Inhalt.
<meta charset="utf-8"> macht Umlaute möglich, der <title> erscheint in Tab, Lesezeichen und Suchergebnissen, die viewport-Zeile ist Pflicht für Mobilgeräte.
Kommentare  sind Notizen für dich – aber im Quelltext für jeden lesbar.
Eine als .html gespeicherte Textdatei ist eine vollwertige Webseite: ändern, speichern, neu laden.

Das Gerüst steht – aber im <body> herrscht noch gähnende Leere. In der nächsten Lektion „Überschriften & Text auszeichnen“ füllst du ihn mit Leben: Du gliederst Seiten mit sechs Überschriftenebenen, gibst Wörtern Nachdruck und lernst Zeichen kennen, die man in HTML nicht einfach so tippen darf.

Weiter: Überschriften & Text auszeichnen →