HTML-Struktur verstehen

Du weisst jetzt, wie du eine HTML-Seite erstellst. Aber wie genau verarbeitet der Browser deinen Code? Und warum verhalten sich manche Elemente anders als andere? In diesem Kapitel schauen wir uns die Struktur von HTML genauer an.

Der DOM: Wie der Browser HTML sieht

Wenn der Browser deine HTML-Datei laedt, erstellt er daraus einen DOM (Document Object Model) — eine Baumstruktur:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo</h1>
    <p>Ein <strong>wichtiger</strong> Text.</p>
  </body>
</html>

Der Browser sieht das als Baum:

document
  └── html
      ├── head
      │   └── title
      │       └── "Meine Seite"
      └── body
          ├── h1
          │   └── "Hallo"
          └── p
              ├── "Ein "
              ├── strong
              │   └── "wichtiger"
              └── " Text."

Jedes HTML-Element ist ein Knoten in diesem Baum. Elemente koennen Kinder (children), Eltern (parents) und Geschwister (siblings) haben.

Warum ist der DOM wichtig?

CSS nutzt den DOM, um Elemente zu stylen
JavaScript nutzt den DOM, um Elemente zu aendern
Browser nutzen den DOM, um die Seite darzustellen

Block- vs. Inline-Elemente

Das ist eine der wichtigsten Unterscheidungen in HTML!

Block-Elemente

Block-Elemente nehmen die gesamte verfuegbare Breite ein und beginnen immer in einer neuen Zeile:

<div>Ich bin ein Block-Element</div>
<p>Ich auch!</p>
<h1>Und ich!</h1>

<!-- Alle drei stehen untereinander -->

Wichtige Block-Elemente:

Tag	Verwendung
`<div>`	Allgemeiner Container
`<p>`	Textabsatz
`<h1>` bis `<h6>`	Ueberschriften
`<ul>`, `<ol>`	Listen
`<table>`	Tabellen
`<form>`	Formulare
`<header>`, `<footer>`	Seitenbereiche
`<section>`, `<article>`	Inhaltsabschnitte

Inline-Elemente

Inline-Elemente nehmen nur so viel Platz wie noetig ein und bleiben im Textfluss:

<p>
    Das ist ein <strong>fetter</strong> und
    <em>kursiver</em> Text mit einem
    <a href="#">Link</a> mittendrin.
</p>

<!-- Alles bleibt in einer Zeile -->

Wichtige Inline-Elemente:

Tag	Verwendung
`<span>`	Allgemeiner Inline-Container
`<strong>`	Fetter, wichtiger Text
`<em>`	Kursiver, betonter Text
`<a>`	Links
`<img>`	Bilder
`<br>`	Zeilenumbruch
`<code>`	Code-Schnipsel

Der Unterschied visuell

<!-- Block-Elemente: Jeweils eigene Zeile -->
<div style="background: lightblue; padding: 10px;">Block 1</div>
<div style="background: lightgreen; padding: 10px;">Block 2</div>

<!-- Inline-Elemente: In einer Zeile -->
<span style="background: lightblue; padding: 5px;">Inline 1</span>
<span style="background: lightgreen; padding: 5px;">Inline 2</span>

Wichtige Regel

Block-Elemente koennen Inline-Elemente enthalten. Aber Inline-Elemente sollten keine Block-Elemente enthalten:

<!-- Richtig -->
<div>
    <p>Text mit <strong>fettem</strong> Wort.</p>
</div>

<!-- Falsch -->
<span>
    <div>Das ist ungueltig!</div>
</span>

Semantische HTML-Elemente

Frueher wurde fast alles mit <div> gebaut. Heute gibt es semantische Elemente, die dem Browser (und Suchmaschinen) sagen, was der Inhalt ist:

<!-- Alt: Alles mit div -->
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main-content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

<!-- Modern: Semantische Tags -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Die wichtigsten semantischen Tags

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantische Struktur</title>
</head>
<body>
    <header>
        <h1>Meine Webseite</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">Ueber mich</a>
            <a href="#kontakt">Kontakt</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Mein erster Blogpost</h2>
            <p>Hier steht der Inhalt...</p>
        </article>

        <section>
            <h2>Kommentare</h2>
            <p>Noch keine Kommentare.</p>
        </section>
    </main>

    <aside>
        <h3>Ueber den Autor</h3>
        <p>Kurze Bio hier...</p>
    </aside>

    <footer>
        <p>&copy; 2026 Mein Name</p>
    </footer>
</body>
</html>

Warum semantisches HTML?

Vorteil	Erklaerung
Barrierefreiheit	Screenreader verstehen die Struktur
SEO	Suchmaschinen bewerten den Inhalt besser
Lesbarkeit	Dein Code ist leichter zu verstehen
Wartbarkeit	Aenderungen sind einfacher

Verschachtelung und Einrueckung

Guter HTML-Code ist sauber eingerueckt. Das macht ihn lesbar:

<!-- Schlecht: Keine Einrueckung -->
<div><header><h1>Titel</h1></header><main><p>Text</p></main></div>

<!-- Gut: Saubere Einrueckung -->
<div>
    <header>
        <h1>Titel</h1>
    </header>
    <main>
        <p>Text</p>
    </main>
</div>

Tipp: Verwende 2 oder 4 Leerzeichen pro Einrueckungsebene. Bleibe bei einer Variante.

Der Head-Bereich im Detail

Der <head> enthaelt wichtige Metadaten:

<head>
    <!-- Zeichensatz (immer als erstes!) -->
    <meta charset="UTF-8">

    <!-- Viewport fuer Mobilgeraete -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Seitentitel (erscheint im Browser-Tab) -->
    <title>Mein Seitentitel</title>

    <!-- Beschreibung fuer Suchmaschinen -->
    <meta name="description" content="Eine kurze Beschreibung meiner Seite">

    <!-- Externe CSS-Datei einbinden -->
    <link rel="stylesheet" href="style.css">

    <!-- Favicon (kleines Icon im Browser-Tab) -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Open Graph fuer Social Media -->
    <meta property="og:title" content="Mein Seitentitel">
    <meta property="og:description" content="Beschreibung">
    <meta property="og:image" content="vorschaubild.jpg">
</head>

Eine vollstaendige Beispielseite

Hier ist eine komplette, gut strukturierte HTML-Seite:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Persoenliche Webseite von Max Mustermann">
    <title>Max Mustermann - Webentwickler</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="#home">Home</a>
            <a href="#projekte">Projekte</a>
            <a href="#kontakt">Kontakt</a>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>Willkommen!</h1>
            <p>Ich bin Max, angehender <strong>Webentwickler</strong>.</p>
        </section>

        <section id="projekte">
            <h2>Meine Projekte</h2>
            <article>
                <h3>Projekt 1</h3>
                <p>Beschreibung des Projekts...</p>
            </article>
        </section>

        <section id="kontakt">
            <h2>Kontakt</h2>
            <p>Schreib mir eine <a href="mailto:max@example.com">E-Mail</a>.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Max Mustermann. Alle Rechte vorbehalten.</p>
    </footer>
</body>
</html>

Uebungen

Uebung 1: Seitenstruktur erkennen

Oeffne eine beliebige Webseite, druecke F12 und untersuche den HTML-Code. Finde:

Den <head> und <body> Bereich
Semantische Elemente wie <header>, <nav>, <main>, <footer>
Block- und Inline-Elemente

Uebung 2: Eigene strukturierte Seite

Erstelle eine HTML-Seite mit korrekter semantischer Struktur:

<header> mit Navigation
<main> mit mindestens zwei <section>-Bereichen
<aside> mit einer Seiteninfo
<footer> mit Copyright-Hinweis

Was kommt als Naechstes?

Im naechsten Kapitel widmen wir uns Texten und Ueberschriften im Detail. Du lernst:

Alle Textformatierungs-Tags
Wie du Ueberschriften-Hierarchien richtig nutzt
Besondere Textelemente wie Zitate und Code-Bloecke

Zusammenfassung

Der Browser erstellt aus HTML einen DOM-Baum (Document Object Model)
Block-Elemente nehmen die volle Breite ein, Inline-Elemente nur so viel wie noetig
Semantische Tags wie <header>, <main> und <footer> geben dem Inhalt Bedeutung
Gute Einrueckung macht den Code lesbar und wartbar
Der <head> enthaelt Metadaten, der <body> den sichtbaren Inhalt

Pro-Tipp: In VS Code kannst du ! eingeben und Tab druecken — das erzeugt automatisch die komplette HTML-Grundstruktur. Diese Emmet-Abkuerzung spart dir bei jedem neuen Dokument Zeit!