Grundgerüst einer HTML-Datei

Jede HTML-Datei folgt demselben Grundaufbau. Die folgenden Bestandteile sind immer vorhanden:

  1. <!DOCTYPE html> — teilt dem Browser mit, dass es sich um HTML5 handelt
  2. <html lang="de"> — umschließt das gesamte Dokument, lang gibt die Sprache an
  3. <head> — unsichtbarer Bereich mit Metadaten (Zeichensatz, Titel, CSS-Links …)
  4. <body> — alles, was der Browser anzeigt, kommt hierhin

Das Attribut charset="UTF-8" im <meta>-Tag stellt sicher, dass Sonderzeichen (ä, ö, ü …) korrekt dargestellt werden.

So sieht das Grundgerüst aus

Das folgende Markup zeigt das vollständige Grundgerüst inklusive der wichtigsten <meta>-Tags und der CSS-Einbindung:

<!-- Doctype: Browser weiß, dass HTML5 folgt -->
<!DOCTYPE html>
<html lang="de">
<head>
    <!-- Zeichensatz: immer UTF-8, damit Umlaute funktionieren -->
    <meta charset="UTF-8">
    <!-- Titel erscheint im Browser-Tab -->
    <title>Seitentitel</title>
    <!-- Externes CSS einbinden -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    Hallo :)

</body>
</html>

Das Ergebnis im Browser: der Text „Hallo :)" wird angezeigt – mehr steht ja auch noch nicht im <body>.

Hallo :)