Das Grundgerüst: DOCTYPE, html, head und body
Das Grundgerüst: DOCTYPE, html, head und body
~9 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Im letzten Kapitel hat unsere Datei nur aus einer einzigen Zeile bestanden, und das hat auch funktioniert. Aber echte HTML-Dateien haben ein festes Grundgerüst drumherum, das man am Anfang jeder Seite hinschreibt. Das lernst du jetzt - und ab jetzt benutzen wir es immer.
Das vollständige Grundgerüst
Ersetze den kompletten Inhalt deiner index.html durch Folgendes:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Finns Fußball-Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
</body>
</html>Speichere und lade die Seite im Browser neu. Optisch ändert sich nichts - du siehst weiterhin nur die Überschrift. Aber schau dir jetzt den Titel des Browser-Tabs oben an: Dort steht jetzt "Finns Fußball-Webseite" statt eines leeren Tabs oder des Dateinamens. Das war der <title>.
Was jede Zeile bedeutet
Gehen wir die neuen Zeilen einzeln durch:
<!DOCTYPE html>: Die allererste Zeile jeder HTML-Datei. Sie sagt dem Browser: "Das hier ist eine moderne HTML-Seite." Ohne diese Zeile könnte der Browser sich in einem veralteten Modus verhalten. Diese Zeile schreibst du in Zukunft einfach immer als Erstes hin, ohne weiter darüber nachzudenken.<html lang="de">...</html>: Umschließt die gesamte Seite. Alles, was zur Webseite gehört, steht zwischen diesen beiden Tags. Daslang="de"sagt: "Diese Seite ist auf Deutsch geschrieben" - das hilft zum Beispiel Screenreadern für blinde Menschen und Übersetzungsprogrammen.<head>...</head>: Der "Kopf" der Seite. Hier steht Information über die Seite, die nicht direkt sichtbar im Browserfenster erscheint (der Titel, Zeichensatz, später auch Beschreibungen für Suchmaschinen).<meta charset="UTF-8">: Sagt dem Browser, welche Zeichenkodierung benutzt wird, damit Umlaute wie ä, ö, ü und Sonderzeichen wie ✓ oder € korrekt angezeigt werden. UTF-8 ist der heutige Standard - das kommt einfach immer so rein.<title>...</title>: Der Text, der im Browser-Tab angezeigt wird, und auch der Text, der z.B. bei Google als blaue Überschrift in den Suchergebnissen erscheint.<body>...</body>: Der "Körper" der Seite. Hier steht alles, was im Browserfenster tatsächlich sichtbar ist: Überschriften, Text, Bilder, Links, Formulare. Ab jetzt schreiben wir fast alles, was wir lernen, zwischen diese beiden Tags.
Verschachtelung und Einrückung
Dir ist bestimmt aufgefallen, dass manche Zeilen weiter eingerückt sind (also mit Leerzeichen nach rechts verschoben) als andere. Das nennt man Verschachtelung: <head> und <body> sind innerhalb von <html>, deshalb sind sie eingerückt. Die Einrückung ist für den Browser völlig egal - er würde die Seite auch ohne jede Einrückung genauso anzeigen. Aber für dich als Mensch macht die Einrückung den Code viel leichter lesbar, weil du auf einen Blick siehst, was zu was gehört.
Tipp: Eine gute Faustregel: Jedes Mal, wenn du ein öffnendes Tag schreibst und darin weitere Tags unterbringen willst, rückst du die nächste Zeile um zwei Leerzeichen ein. Wenn ein Tag wieder schließt, springt die Einrückung wieder zurück.
Öffnende und schließende Tags
Fast jedes HTML-Element besteht aus einem öffnenden Tag (<body>) und einem schließenden Tag (</body>) - der einzige Unterschied ist der Schrägstrich /. Alles, was zwischen den beiden Tags steht, "gehört" zu diesem Element. Wir werden im Laufe des Tutorials noch ein paar Elemente kennenlernen, die keinen schließenden Tag brauchen (zum Beispiel für Bilder), aber die meisten funktionieren genau nach diesem Prinzip: auf, Inhalt, zu.
Achtung: Ein sehr häufiger Anfängerfehler: ein Tag öffnen, aber vergessen, es wieder zu schließen, oder die Reihenfolge beim Schließen durcheinanderbringen. Browser versuchen zwar, auch fehlerhaftes HTML irgendwie anzuzeigen, aber das Ergebnis sieht dann oft merkwürdig aus. Wenn deine Seite komisch aussieht: als Erstes immer prüfen, ob alle Tags auch wirklich wieder geschlossen wurden.