Das HTML-Grundgerüst steht am Anfang jedes Dokuments: der DOCTYPE, das html-Element und darin dem Kopfbereich und dem Körper. Diese Zeilen schreibt heute jedes CMS und jedes Framework von sich aus.
- HTML-Grundgerüst
Der feste Rahmen aus DOCTYPE, html-, head- und body-Element, mit dem jedes HTML-Dokument beginnt.
Beispiel: „Das HTML-Grundgerüst steht in jeder Datei gleich und wird selten von Hand geschrieben.“
Wie es aussieht
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel der Seite</title>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>Mehr ist für ein gültiges Dokument nicht nötig. Alles Weitere, vom Stylesheet bis zur Beschreibung für Suchmaschinen, kommt in den Kopfbereich dazu.
Was die vier Angaben leisten
Der DOCTYPE schaltet den Darstellungsmodus. Die Sprachangabe am html-Element sagt Screenreadern, in welcher Sprache sie vorlesen sollen, und beeinflusst die Silbentrennung. Die Zeichensatzangabe muss früh stehen, weil der Browser sonst rät und Umlaute als Fragezeichen erscheinen.
Die vierte Zeile betrifft Mobilgeräte. Ohne sie stellen Telefone die Seite in einer gedachten Breite von rund 980 Pixeln dar und verkleinern das Ergebnis, sodass Media Queries wirkungslos bleiben.
Reihenfolge im Kopfbereich
Die Zeichensatzangabe gehört in die ersten 1024 Bytes des Dokuments, sonst beginnt der Browser von vorn. In der Praxis setzt man sie als erste Zeile im head, direkt gefolgt von der Viewport-Angabe und dem Titel.
Der Titel ist das einzige Pflichtelement im Kopfbereich. Er steht im Browser-Tab, in den Lesezeichen und als Überschrift in den Suchergebnissen.