DevPanicZone Logo DevPanicZone! Cheatsheets.

Das HTML Grundgerüst

Das Grundgerüst legt die Struktur des Dokuments fest und zeigt, welche Bereiche für technische Informationen und welche für den sichtbaren Inhalt gedacht sind.

Das HTML Grundgerüst

Bevor du mit dem Inhalt deiner Website beginnst, legst du zunächst das Grundgerüst an - meist in einer Datei namens index.html. Diese dient als Startseite und wird automatisch geladen, wenn jemand deine Domain aufruft.

Jede HTML-Datei folgt einer festen Grundstruktur - dem HTML-Grundgerüst. Diese Struktur teilt das Dokument in verschiedene Bereiche auf und sorgt dafür, dass Browser die Seite korrekt darstellen können.

Warum ist das Grundgerüst wichtig?
  • Browser-Kompatibilität: Einheitliche Darstellung in allen Browsern
  • SEO: Suchmaschinen können die Seite besser verstehen
  • Accessibility: Screenreader können die Struktur erfassen
  • Standards: Einhaltung der HTML5-Spezifikation

Das Grundgerüst besteht aus zwei Hauptbereichen:

  • <head> - Metadaten, die nicht sichtbar sind (Titel, CSS, Meta-Tags)
  • <body> - Der sichtbare Inhalt der Webseite

Das minimale HTML-Grundgerüst

HTML 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
</head>
<body>
    <!-- Inhalt der Seite -->
</body>
</html>

Dieses Grundgerüst ist die Basis für jede HTML-Datei. Es beginnt mit der Zeile <!DOCTYPE html>, die dem Browser mitteilt, dass das Dokument im aktuellen HTML5-Standard geschrieben ist.

Wichtig zu wissen

Ohne die DOCTYPE-Deklaration könnte der Browser ältere Darstellungsmodi aktivieren, was zu fehlerhaftem Layout führen kann. Deshalb solltest du sie nie vergessen!

DOCTYPE - Die Dokumenttyp-Deklaration

HTML 
<!DOCTYPE html>

Die DOCTYPE-Deklaration steht immer in der ersten Zeile und teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt.

Warum ist DOCTYPE wichtig?

  • Ohne DOCTYPE verwendet der Browser den "Quirks Mode" (alte, fehlerhafte Darstellung)
  • Mit DOCTYPE arbeitet der Browser im "Standards Mode" (moderne, korrekte Darstellung)
  • HTML5 hat die einfachste DOCTYPE-Syntax: <!DOCTYPE html>
Alte DOCTYPE-Deklarationen (vor HTML5)

Früher waren DOCTYPE-Deklarationen sehr lang und kompliziert:

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mit HTML5 wurde das auf eine einzige Zeile vereinfacht!

Das html-Tag und das lang-Attribut

HTML 
<html lang="de">
    <!-- Alle weiteren Elemente -->
</html>

Das <html>-Tag ist das Root-Element - es umschließt alle anderen HTML-Elemente.

Das lang-Attribut

Das lang-Attribut gibt die Hauptsprache der Seite an. Das ist wichtig für:

Suchmaschinen (SEO)
Google & Co. können die Seite in der richtigen Sprache indexieren
Screenreader
Vorlesesoftware kann die korrekte Aussprache verwenden
Browser-Features
Automatische Übersetzung, Rechtschreibprüfung

Häufige Sprachcodes

Code Sprache Beispiel
de Deutsch <html lang="de">
en Englisch <html lang="en">
fr Französisch <html lang="fr">
es Spanisch <html lang="es">

Der <head>-Bereich

Im <head> stehen alle Metadaten - Informationen über die Seite, die nicht direkt sichtbar sind.

Verwechslungsgefahr

<head> (Metadaten) ≠ <header> (sichtbarer Kopfbereich der Seite)

Was gehört in den head?

Zeichenkodierung (Pflicht!)

HTML 
<meta charset="UTF-8">

UTF-8 ist der Standard für internationale Zeichen (Umlaute, Emojis, etc.). Ohne diese Zeile werden Umlaute falsch dargestellt!

Title (Pflicht!)

HTML 
<title>Meine Website - Startseite</title>
  • Erscheint im Browser-Tab
  • Wird in Suchergebnissen angezeigt
  • Erscheint bei Bookmarks
  • 50-60 Zeichen sind ideal für SEO

Viewport (wichtig für Mobile!)

HTML 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sorgt dafür, dass die Seite auf Smartphones korrekt skaliert wird. Ohne diese Zeile erscheint die Desktop-Version verkleinert auf dem Handy!

CSS-Dateien einbinden

HTML 
<link rel="stylesheet" href="styles.css">

Favicon (optional, aber empfohlen)

HTML 
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="icon" type="image/png" href="/assets/favicon.png">

Das Favicon ist das kleine Icon im Browser-Tab. SVG ist modern und skalierbar, PNG als Fallback für ältere Browser.

Der Browser geht die Liste von oben nach unten durch und nimmt das erste Format, das er unterstützt:

  1. Moderner Browser (Chrome, Firefox, Edge, Safari 15+): "SVG? Kann ich! → Nehme ich."
  2. Älterer Browser (IE, Safari <15): "SVG? Kenne ich nicht. PNG? Das nehme ich!"

Meta-Description (wichtig für SEO)

HTML 
<meta name="description" content="Kurze Beschreibung der Seite (150-160 Zeichen)">

Wird in Google-Suchergebnissen unter dem Titel angezeigt. Sollte 150-160 Zeichen lang sein.

Weitere Meta-Tags (Optional)
HTML 
<!-- Open Graph für Social Media (Facebook, LinkedIn) -->
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Beschreibung">
<meta property="og:image" content="vorschaubild.jpg">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">

<!-- Author -->
<meta name="author" content="Dein Name">

Mehr dazu im Tutorial Meta Tags!

Der <body>-Bereich

Im <body> steht alles, was der Nutzer sieht - Texte, Bilder, Videos, Links, etc.

HTML 
<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <p>Das ist der sichtbare Inhalt.</p>
    <img src="bild.jpg" alt="Beschreibung">
</body>
Best Practice

Strukturiere den Body mit semantischen HTML5-Tags (siehe nächster Abschnitt) statt nur mit <div>!

Semantische HTML5-Struktur

Moderne Websites verwenden semantische Tags, um die Bedeutung der Bereiche zu kennzeichnen:

<header>

Kopfbereich mit Logo, Navigation

<nav>

Navigationsbereich mit Links

<main>

Hauptinhalt (nur 1x pro Seite!)

<article>

Eigenständiger Inhalt (Blog-Post)

<section>

Thematischer Abschnitt

<aside>

Seitenleiste, zusätzliche Infos

<footer>

Fußbereich mit Impressum, Links

Beispiel: Semantische Struktur

HTML 
<body>
    <header>
        <nav>
            <!-- Hauptnavigation -->
        </nav>
    </header>

    <main>
        <section>
            <h1>Willkommen!</h1>
            <p>Hier steht dein Content...</p>
        </section>
        
        <article>
            <h2>Blog-Post</h2>
            <p>...</p>
        </article>
    </main>

    <aside>
        <!-- Seitenleiste -->
    </aside>

    <footer>
        <p>© 2025 Meine Website</p>
    </footer>
</body>
Wichtig
  • Das <main>-Tag darf nur einmal pro Seite vorkommen!
  • <header> und <footer> können mehrfach vorkommen, z.B. in <article>
  • Mehr Details im Tutorial HTML Semantik

Mehr Informationen dazu im Tutorial Semantisches HTML.

Zum Tutorial

JavaScript einbinden

JavaScript-Dateien werden meist am Ende des <body> eingebunden, damit die Seite schneller lädt:

HTML 
<body>
    <!-- Dein Content -->
    
    <!-- JavaScript am Ende -->
    <script src="script.js"></script>
</body>
Warum am Ende des Body?
  • Schnellere Ladezeit: HTML wird zuerst geladen, Nutzer sieht Inhalt früher
  • DOM ist bereit: JavaScript kann auf alle HTML-Elemente zugreifen
  • Keine Blockierung: Browser muss nicht auf JavaScript warten

Alternative: JavaScript im Head mit defer oder async:

HTML 
<script src="script.js" defer></script>

Production-Ready HTML-Template

Dieses erweiterte Grundgerüst bildet das vollständige Grundlayout einer Website - mit Kopfbereich, Navigation, Hauptinhalt und Fußzeile - und ist die Basis, auf der du deine Seiten aufbauen kannst.

HTML 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Startseite</a></li>
                <li><a href="seite1.html">Seite 1</a></li>
                <li><a href="seite2.html">Seite 2</a></li>
                <li><a href="seite3.html">Seite 3</a></li>
                <li><a href="seite4.html">Seite 4</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Willkommen auf meiner Website</h1>
        <p>Hier kommt der Hauptinhalt hin.</p>
    </main>

    <footer>
        <p>&copy; 2025 Meine Website</p>
    </footer>
</body>
</html>

Best Practices

  • DOCTYPE nie vergessen - Immer in Zeile 1
  • lang-Attribut setzen - Wichtig für SEO und Accessibility
  • UTF-8 verwenden - Unterstützt alle internationalen Zeichen
  • Viewport-Meta-Tag - Pflicht für mobile Geräte
  • Title aussagekräftig - 50-60 Zeichen, beschreibend
  • Meta-Description hinzufügen - 150-160 Zeichen für SEO
  • Semantische Tags nutzen - <header>, <main>, <footer> statt nur <div>
  • JavaScript am Ende - Oder mit defer im Head
  • Code einrücken - Bessere Lesbarkeit
  • Kommentare nutzen - Bereiche markieren
Validierung

Prüfe dein HTML mit dem W3C Validator auf Fehler!

Mehr aus HTML

Tutorials werden geladen...