Semantisches HTML

Semantisches HTML bedeutet, dass du HTML-Tags verwendest, die die Bedeutung des Inhalts ausdruecken — nicht nur sein Aussehen. Statt alles in <div>-Elemente zu packen, nutzt du Tags wie <article>, <nav> und <header>, die dem Browser, Screenreadern und Suchmaschinen zeigen, was der Inhalt ist.

Warum Semantik wichtig ist

Der Unterschied

<!-- Nicht semantisch: Alles mit div -->
<div class="header">
    <div class="nav">
        <div class="nav-item"><a href="/">Home</a></div>
    </div>
</div>
<div class="main">
    <div class="article">
        <div class="title">Mein Artikel</div>
        <div class="text">Inhalt hier...</div>
    </div>
</div>
<div class="footer">Copyright 2026</div>

<!-- Semantisch: Tags mit Bedeutung -->
<header>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>
<main>
    <article>
        <h1>Mein Artikel</h1>
        <p>Inhalt hier...</p>
    </article>
</main>
<footer>Copyright 2026</footer>

Drei Gruende fuer semantisches HTML

Grund	Erklaerung
Barrierefreiheit	Screenreader verstehen die Seitenstruktur
SEO	Suchmaschinen bewerten Inhalte besser
Wartbarkeit	Code ist lesbarer und verstaendlicher

Die wichtigsten semantischen Elemente

Seitenstruktur

<body>
    <header>
        <!-- Logo, Navigation, Suchfeld -->
    </header>

    <nav>
        <!-- Hauptnavigation -->
    </nav>

    <main>
        <!-- Hauptinhalt der Seite (nur einmal pro Seite!) -->

        <article>
            <!-- Eigenstaendiger Inhalt (Blog-Post, Nachricht) -->
        </article>

        <section>
            <!-- Thematischer Abschnitt -->
        </section>

        <aside>
            <!-- Seitenleiste, verwandter Inhalt -->
        </aside>
    </main>

    <footer>
        <!-- Copyright, Links, Kontakt -->
    </footer>
</body>

Wann welches Element?

Element	Verwendung	Beispiel
`<header>`	Einleitender Bereich	Seitenheader, Artikelheader
`<nav>`	Navigation	Hauptmenue, Breadcrumbs
`<main>`	Hauptinhalt (einmal!)	Der zentrale Seiteninhalt
`<article>`	Eigenstaendiger Inhalt	Blog-Post, Produkt, Kommentar
`<section>`	Thematischer Abschnitt	Kapitel, Tab-Inhalt
`<aside>`	Ergaenzender Inhalt	Sidebar, Infobox
`<footer>`	Abschliessender Bereich	Copyright, Kontakt-Links

article vs. section vs. div

`<article>`: Eigenstaendiger Inhalt

Verwende <article>, wenn der Inhalt fuer sich allein stehen koennte — z.B. in einem RSS-Feed:

<article>
    <header>
        <h2>CSS Grid: Ein vollstaendiger Guide</h2>
        <time datetime="2026-03-10">10. Maerz 2026</time>
        <span class="author">Max Mustermann</span>
    </header>
    <p>In diesem Artikel lernst du...</p>
    <footer>
        <p>Tags: CSS, Grid, Layout</p>
    </footer>
</article>

`<section>`: Thematischer Abschnitt

Verwende <section> fuer zusammengehoerige Inhalte mit einer eigenen Ueberschrift:

<section>
    <h2>Unsere Services</h2>
    <div class="service-grid">
        <!-- Service-Cards -->
    </div>
</section>

<section>
    <h2>Kundenstimmen</h2>
    <!-- Testimonials -->
</section>

`<div>`: Kein semantischer Wert

Verwende <div> nur als Container fuer Styling, wenn kein semantisches Element passt:

<!-- div nur fuer CSS-Layout -->
<div class="grid-wrapper">
    <article>...</article>
    <article>...</article>
</div>

Textbezogene semantische Elemente

<!-- Zeitangaben -->
<time datetime="2026-03-10">10. Maerz 2026</time>
<time datetime="14:30">14:30 Uhr</time>

<!-- Adressen -->
<address>
    Max Mustermann<br>
    Musterstrasse 42<br>
    12345 Musterstadt<br>
    <a href="mailto:max@example.com">max@example.com</a>
</address>

<!-- Abkuerzungen -->
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- Markierter Text -->
<p>Suche nach <mark>HTML</mark> in den Ergebnissen.</p>

<!-- Zitate -->
<blockquote cite="https://example.com">
    <p>Das Web ist fuer alle da.</p>
    <footer>-- <cite>Tim Berners-Lee</cite></footer>
</blockquote>

<!-- Computercode -->
<code>console.log("Hallo")</code>

<!-- Tasteneingaben -->
<kbd>Strg</kbd> + <kbd>S</kbd>

<!-- Programmausgabe -->
<samp>Error: File not found</samp>

<!-- Variable -->
<p>Die Formel lautet <var>a</var>² + <var>b</var>² = <var>c</var>²</p>

Figure und Figcaption

Fuer Bilder, Diagramme, Code-Beispiele und mehr:

<figure>
    <img src="diagramm.png" alt="Flussdiagramm des CSS-Renderings">
    <figcaption>
        Abbildung 1: So rendert der Browser CSS.
    </figcaption>
</figure>

<!-- Auch fuer Code-Beispiele -->
<figure>
    <pre><code>
const greeting = "Hallo Welt";
console.log(greeting);
    </code></pre>
    <figcaption>Beispiel: Variable in JavaScript</figcaption>
</figure>

Details und Summary

Native Accordion-Funktionalitaet ohne JavaScript:

<details>
    <summary>Was kostet der Kurs?</summary>
    <p>Der Kurs ist komplett kostenlos!</p>
</details>

<details>
    <summary>Brauche ich Vorkenntnisse?</summary>
    <p>Nein, der Kurs ist fuer absolute Anfaenger geeignet.</p>
</details>

<details open>
    <summary>Wie lange dauert der Kurs?</summary>
    <p>Rechne mit 4-6 Wochen bei 1-2 Stunden pro Tag.</p>
</details>

Richtige Ueberschriften-Hierarchie

<!-- Richtig: Logische Hierarchie -->
<body>
    <h1>Webentwicklung lernen</h1>  <!-- Nur EINE h1 pro Seite -->

    <section>
        <h2>HTML Grundlagen</h2>
        <h3>Tags und Attribute</h3>
        <h3>Seitenstruktur</h3>
    </section>

    <section>
        <h2>CSS Grundlagen</h2>
        <h3>Selektoren</h3>
        <h3>Box-Modell</h3>
    </section>
</body>

<!-- Falsch: Stufen uebersprungen -->
<body>
    <h1>Titel</h1>
    <h4>Untertitel</h4>  <!-- h2 oder h3 fehlt! -->
</body>

Eine vollstaendige semantische 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="Blog ueber Webentwicklung">
    <title>WebDev Blog - Webentwicklung lernen</title>
</head>
<body>
    <header>
        <a href="/" aria-label="Zur Startseite">
            <img src="logo.svg" alt="WebDev Blog Logo" width="150" height="40">
        </a>
        <nav aria-label="Hauptnavigation">
            <ul>
                <li><a href="/" aria-current="page">Home</a></li>
                <li><a href="/tutorials">Tutorials</a></li>
                <li><a href="/about">Ueber uns</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Aktuelle Tutorials</h1>

        <article>
            <header>
                <h2><a href="/post/css-grid">CSS Grid verstehen</a></h2>
                <p>
                    Von <span class="author">Anna Mueller</span> am
                    <time datetime="2026-03-10">10. Maerz 2026</time>
                </p>
            </header>
            <p>CSS Grid ist das maechtigste Layout-System...</p>
            <footer>
                <ul class="tags">
                    <li>CSS</li>
                    <li>Layout</li>
                </ul>
            </footer>
        </article>

        <article>
            <header>
                <h2><a href="/post/html5">HTML5 Semantik</a></h2>
                <time datetime="2026-03-05">5. Maerz 2026</time>
            </header>
            <p>Semantisches HTML verbessert Barrierefreiheit...</p>
        </article>
    </main>

    <aside aria-label="Sidebar">
        <section>
            <h2>Beliebte Tags</h2>
            <ul>
                <li><a href="/tag/html">HTML</a></li>
                <li><a href="/tag/css">CSS</a></li>
                <li><a href="/tag/js">JavaScript</a></li>
            </ul>
        </section>
    </aside>

    <footer>
        <nav aria-label="Footer-Navigation">
            <a href="/impressum">Impressum</a>
            <a href="/datenschutz">Datenschutz</a>
        </nav>
        <p><small>&copy; 2026 WebDev Blog</small></p>
    </footer>
</body>
</html>

Uebungen

Uebung 1: Semantik-Audit

Nimm eine bestehende HTML-Seite (oder eine beliebige Webseite) und identifiziere:

Wo <div> durch semantische Tags ersetzt werden sollte
Ob die Ueberschriften-Hierarchie stimmt
Ob <main> nur einmal vorkommt

Uebung 2: Blog-Seite

Erstelle eine Blog-Uebersichtsseite mit korrekter Semantik:

<header> mit Logo und Navigation
<main> mit mehreren <article>-Elementen
<aside> mit Kategorien
<footer> mit Links

Uebung 3: FAQ-Seite

Erstelle eine FAQ-Seite mit:

<details> und <summary> fuer Fragen und Antworten
Korrekter Ueberschriften-Struktur
<time> fuer Datumsangaben

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Barrierefreiheit (Accessibility):

ARIA-Attribute
Tastatur-Navigation
Screenreader-kompatibles HTML

Zusammenfassung

Semantische Tags druecken die Bedeutung des Inhalts aus, nicht nur das Aussehen
<main> darf nur einmal pro Seite vorkommen
<article> fuer eigenstaendige Inhalte, <section> fuer thematische Abschnitte
<div> ist nur fuer Styling-Container — verwende es als letzte Option
<time> mit dem datetime-Attribut macht Daten maschinenlesbar
<details> und <summary> erstellen native Accordions
Eine korrekte Ueberschriften-Hierarchie (h1 -> h2 -> h3) ist essentiell

Pro-Tipp: Verwende die Browser-Erweiterung “Landmark Navigation via Keyboard” oder den Accessibility-Tab in den DevTools, um die semantische Struktur deiner Seite zu pruefen. Screenreader-Nutzer navigieren haeufig ueber Landmarks (header, nav, main, footer) — stelle sicher, dass sie funktionieren!