Semantische HTML5-Tags: vollständiger Leitfaden mit Beispielen
Wie semantisches HTML die Seitenstruktur für Menschen und Maschinen verständlich macht, wo es die Barrierefreiheit verbessert und warum es keine Abkürzung zu besseren Rankings ist.
Vor HTML5 war das Web ein Meer aus div- und span-Elementen mit CSS-Klassen wie .header, .sidebar, .footer. Suchmaschinen und Screenreader mussten raten, welcher Block was ist. HTML5 führte semantische Tags ein: Elemente, die ihre Bedeutung aus sich selbst heraus tragen, unabhängig von CSS. Das <article>-Tag steht für in sich geschlossene Inhalte. Das <nav>-Tag steht für Navigation. Das <aside>-Tag steht für ergänzende Inhalte, die mit dem Hauptinhalt zusammenhängen, zum Verständnis aber nicht nötig sind.
Strukturelle Seiten-Tags
HTML5 führte eine Reihe von Tags ein, um große Bereiche der Seite auszuzeichnen. Sie bilden das Grundgerüst des Dokuments, das Browser, Suchmaschinen und assistive Technologien durchlaufen können, ohne CSS auszuwerten.
- <header>
- Einleitender Inhalt des nächstgelegenen Abschnittskontexts, also der Seite oder eines Abschnitts. Auf Seitenebene: der Seitenkopf mit Logo, Navigation und Suche. Innerhalb von <article>: Titel, Metadaten und Autor. Mehrere <header>-Elemente auf einer Seite sind gültig, wenn sie zu verschiedenen Abschnitten gehören.
- <nav>
- Ein Block mit Navigationslinks. Nicht jede Gruppe von Links ist ein <nav>, sondern nur die wichtigen Navigationswege: Hauptmenü, Breadcrumbs, Paginierung. Links im Footer zur Datenschutzerklärung sind kein <nav>. Screenreader nutzen <nav> für einen Tastaturbefehl, der direkt zur Navigation springt.
- <main>
- Der eindeutige Hauptinhalt der Seite. Pro Dokument gibt es nur ein <main>. Inhalte in <main> sollten sich nicht auf anderen Seiten wiederholen. Kopfzeilen, Fußzeilen und Seitenleisten wiederholen sich, deshalb stehen sie außerhalb von <main>. Screenreader springen über einen Tastaturbefehl direkt zu <main>.
- <footer>
- Der abschließende Bereich des nächstgelegenen Abschnittskontexts. Auf Seitenebene: Kontakte, Copyright, Links. Innerhalb von <article>: Angaben zum Autor, Tags, Datum der letzten Aktualisierung. Wie <header> kann auch <footer> in mehreren Abschnitten vorkommen.
- <article>
- In sich geschlossener, eigenständig verbreitbarer Inhalt: Blogbeitrag, Nachricht, Forenbeitrag, Produktkarte oder Kommentar. Der Schlüsseltest: Wenn Sie das <article> aus dem Kontext lösen und allein veröffentlichen, ergibt es dann Sinn? Wenn ja, ist es ein <article>.
- <section>
- Thematisch zusammenhängender Teil eines Dokuments, für den kein spezifischeres Tag existiert. Ein <section> braucht immer eine Überschrift (<h2> bis <h6>). Fehlt sie, ist meist ein <div> die richtige Wahl. Verwenden Sie <section> nicht als Ersatz für ein <div> zur Gestaltung.
- <aside>
- Inhalt, der nur indirekt mit dem Hauptinhalt zusammenhängt: Hinweisboxen, Seitenleisten, Werbeblöcke, Autorenbiografien, verwandte Artikel. Innerhalb von <article>: eine Anmerkung oder ein Zitat, das für das Verständnis des Haupttextes nicht entscheidend ist. Auf Seitenebene: eine Seitenspalte.
So sieht das Grundgerüst jeder Seite aus. Dieses Markup ist bereits semantisch korrekt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<header>
<a href="/"><img src="logo.svg" alt="Company name"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<!-- Unique page content -->
</main>
<footer>
<p>© 2026 Company name</p>
<nav aria-label="Secondary navigation">
<a href="/privacy">Privacy</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Inhalts-Tags: article, section, h1–h6, p
Tags der Strukturebene legen die Regionen der Seite fest. Tags der Inhaltsebene beschreiben die Art des Inhalts selbst. Schauen wir uns die Kombination an, die auf jeder Blogseite vorkommt.
<!-- Blog post page -->
<main>
<article>
<header>
<h1>How to choose the right HTML tag</h1>
<p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
<address>
By: <a rel="author" href="/authors/pavlo">seohead</a>
</address>
</header>
<section>
<h2>Why semantics matters</h2>
<p>Section text...</p>
</section>
<section>
<h2>Main tags</h2>
<p>Section text...</p>
<aside>
<p>Note: the HTML Living Standard is continuously updated.</p>
</aside>
</section>
<footer>
<p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
</footer>
</article>
<!-- Related articles -->
<aside aria-label="Related articles">
<h2>Also read</h2>
<ul>
<li><a href="/blog/heading-structure">Heading structure</a></li>
<li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
</ul>
</aside>
</main>Wann section, wann div
Die Regel ist einfach: Hat ein Block einen semantischen Namen, nehmen Sie <section>. Dient er nur der Gestaltung oder als JavaScript-Hook, nehmen Sie <div>.
<!-- CORRECT: section with a heading -->
<section>
<h2>Product benefits</h2>
<ul>
<li>Fast delivery</li>
<li>2-year warranty</li>
</ul>
</section>
<!-- CORRECT: div for styling -->
<div class="cards-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- WRONG: section with no heading -->
<section class="cards-grid">
<article>...</article>
</section>
<!-- WRONG: div where content has meaning -->
<div id="about">
<!-- The About section — this should be <section> -->
<h2>About us</h2>
<p>...</p>
</div>Medien-, Daten- und Hilfs-Tags
HTML5 führte Tags für bestimmte Datentypen ein. Sie geben Suchmaschinen zusätzliche Signale, ohne dass dafür Schema.org-Markup nötig ist.
<figure> und <figcaption>
Eigenständiger Medieninhalt mit Beschriftung: Bilder, Diagramme, Tabellen, Code-Snippets, alles, was zum Haupttext gehört und ohne Bedeutungsverlust verschoben oder in einen Anhang ausgelagert werden könnte. <figcaption> ist die offizielle Bildunterschrift für ein <figure>. Google nutzt <figcaption> bei der Bildanalyse als ergänzende Bildbeschreibung.
<time>
Ein maschinenlesbares Datum oder eine Uhrzeit. Das datetime-Attribut im Format ISO 8601 erlaubt der Suchmaschine, das Veröffentlichungs- oder Veranstaltungsdatum genau zu bestimmen, unabhängig davon, wie das Datum dem Nutzer angezeigt wird. Google empfiehlt ausdrücklich, <time> für Artikeldaten in den strukturierten Daten vom Typ Article zu verwenden.
<address>
Kontaktinformationen für das nächstgelegene <article> oder das gesamte Dokument. Innerhalb von <article>: die Kontaktdaten des Autors. Auf Seitenebene: die Kontaktinformationen der Organisation. Verwenden Sie <address> nicht für gewöhnliche Postanschriften außerhalb der Kontaktangaben von Autor oder Organisation.
<details> und <summary>
Ein nativer aufklappbarer Bereich ohne JavaScript. <summary> ist die sichtbare Überschrift, <details> enthält den verborgenen Inhalt. Der Browser übernimmt das Öffnen und Schließen automatisch. Suchmaschinen indexieren den Inhalt von <details> auch im geschlossenen Zustand. Ideal für FAQs und Spoiler.
<mark>
Markiert Text als im aktuellen Kontext relevant, etwa Suchtreffer oder Keywords in einem Zitat. Nicht mit <strong> (Wichtigkeit) oder <em> (Betonung) verwechseln. <mark> bedeutet „als relevant markiert“, nicht „wichtig“ und nicht „zur Gestaltung hervorgehoben“.
<data> und <output>
<data value="42">Zweiundvierzig</data> verbindet einen menschenlesbaren Text mit einem maschinenlesbaren Wert. <output> steht für das Ergebnis einer Berechnung oder einer Nutzeraktion. Beide Tags sind auf Inhaltsseiten selten, in Webanwendungen mit Formularen und Rechnern aber unverzichtbar.
<!-- figure + figcaption for an image -->
<figure>
<img
src="/images/html5-structure.webp"
alt="Diagram of the semantic structure of an HTML5 page"
width="800" height="450"
>
<figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>
<!-- figure + figcaption for code -->
<figure>
<pre><code class="language-html"><article>...</article></code></pre>
<figcaption>Example: minimal article markup</figcaption>
</figure>
<!-- time with datetime attribute -->
<p>
Article updated:
<time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>
<!-- details + summary (FAQ without JS) -->
<details>
<summary>What is semantic HTML?</summary>
<p>Markup where each tag conveys the meaning of the content,
not just its visual appearance.</p>
</details>
<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>Verschachtelung und Kombinationen: Praxisbeispiele
Die semantische Stärke von HTML5 zeigt sich nicht in einzelnen Tags, sondern in ihrer richtigen Kombination. Schauen wir uns typische Seitenarchitekturen an.
Blog-Übersichtsseite
<main>
<header>
<h1>SEO blog</h1>
<p>Practical articles on website promotion</p>
</header>
<!-- Article list — each card is an article -->
<section aria-label="Article list">
<article>
<header>
<h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
<p>
<time datetime="2026-05-22">22 May 2026</time>
· <span>18 min read</span>
</p>
</header>
<p>HTML5 semantic tags are the foundation of correct page markup...</p>
<footer>
<a href="/blog/semantic-html5">Read more</a>
</footer>
</article>
<article>
<header>
<h2><a href="/blog/heading-structure">Heading structure</a></h2>
<p>
<time datetime="2026-04-10">10 April 2026</time>
· <span>12 min read</span>
</p>
</header>
<p>One H1 per page. H2 divides content into sections...</p>
<footer>
<a href="/blog/heading-structure">Read more</a>
</footer>
</article>
</section>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>
</main>Produktkarte mit Bewertungen
<main>
<article itemscope itemtype="https://schema.org/Product">
<!-- Product main area -->
<header>
<h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
<p itemprop="description">40 hours of battery life, active noise cancellation...</p>
</header>
<!-- Product image -->
<figure>
<img
src="/products/soundmax-pro.webp"
alt="SoundMax Pro wireless headphones — front view"
itemprop="image"
width="600" height="600"
>
<figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
</figure>
<!-- Price -->
<section aria-label="Price and purchase">
<p>
<data value="129" itemprop="price">$129</data>
</p>
<button type="button">Add to cart</button>
</section>
<!-- Specs -->
<section>
<h2>Specifications</h2>
<dl>
<dt>Battery life</dt><dd>40 hours</dd>
<dt>Connection</dt><dd>Bluetooth 5.3</dd>
<dt>Weight</dt><dd>250 g</dd>
</dl>
</section>
<!-- Reviews — each review is an article inside article -->
<section aria-label="Customer reviews">
<h2>Reviews</h2>
<article>
<header>
<strong>Anna K.</strong>
<time datetime="2026-04-15">15 April 2026</time>
</header>
<p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
</article>
<article>
<header>
<strong>Michael R.</strong>
<time datetime="2026-03-28">28 March 2026</time>
</header>
<p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
</article>
</section>
</article>
</main>Landingpage mit Abschnitten und Seitenleiste
<body>
<header>
<nav aria-label="Main navigation">
<!-- logo + menu -->
</nav>
</header>
<main>
<!-- Hero section -->
<section aria-labelledby="hero-title">
<h1 id="hero-title">SEO promotion for your business</h1>
<p>We help businesses improve technical and content foundations</p>
<a href="#contacts" role="button">Get a free audit</a>
</section>
<!-- Services -->
<section>
<h2>Our services</h2>
<ul role="list">
<li>
<article>
<h3>Technical audit</h3>
<p>Full technical health check of your site...</p>
</article>
</li>
<li>
<article>
<h3>Content strategy</h3>
<p>Keyword universe and content calendar...</p>
</article>
</li>
</ul>
</section>
<!-- Main content + sidebar -->
<div class="layout-two-col">
<section>
<h2>Case studies</h2>
<!-- ... -->
</section>
<aside aria-label="Contact us">
<h2>Get in touch</h2>
<address>
<p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
<p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
</address>
</aside>
</div>
</main>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/glossary">Glossary</a></li>
</ul>
</nav>
<p><small>© 2026 seohead.tech</small></p>
</footer>
</body>Mehrere <nav>-Elemente: Breadcrumbs und Paginierung
<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->
<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML5 semantic tags</li>
</ol>
</nav>
<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog" aria-current="page">Blog</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
<a href="?page=1" rel="prev" aria-label="Previous page">←</a>
<a href="?page=1">1</a>
<span aria-current="page">2</span>
<a href="?page=3">3</a>
<a href="?page=3" rel="next" aria-label="Next page">→</a>
</nav>
<!-- In-page table of contents -->
<nav aria-label="Article contents">
<ol>
<li><a href="#structural-tags">Structural tags</a></li>
<li><a href="#content-tags">Content tags</a></li>
<li><a href="#nesting-examples">Nesting examples</a></li>
</ol>
</nav>SEO-Wirkung: Was die Suchmaschine tatsächlich erhält
Semantisches Markup gibt Browsern und assistiven Technologien klarere Strukturinformationen. Es kann eine Seite leichter zu interpretieren und zu warten machen. Es ist aber kein direkter Rankingschalter und kein Ersatz für nützliche Inhalte.
Erkennung des Hauptinhalts
Google nutzt <main>, um den Hauptinhalt einer Seite zu erkennen. Inhalte in Kopfzeile, Fußzeile und <aside> erhalten bei der Bewertung weniger Gewicht. Liegt der gesamte Text in einem <div class="main">, muss Google zusätzliche Ressourcen aufwenden, um die Struktur zu verstehen.
Zuordnung von Datum und Autor
<time datetime="2026-05-22"> liefert Google ein genaues Veröffentlichungsdatum, das in die Einschätzung der Aktualität einfließt. <address> mit rel="author" verknüpft den Artikel mit seinem Autor. Beide Signale fließen in die Erzeugung von Rich-Snippets in den Suchergebnissen ein.
Rich-Suchergebnisse
Google indexiert den Inhalt von <details> + <summary>. Er kann als aufklappbare Blöcke in den Suchergebnissen erscheinen (People Also Ask). <figure> + <figcaption> beeinflussen die Bildindexierung und die Darstellung in der Google-Bildersuche.
Interne Verlinkung
Links innerhalb von <nav> erhalten einen Navigationskontext, Links innerhalb von <article> einen inhaltlichen Kontext. Googlebot berücksichtigt bei der Bewertung eines Links seine Position auf der Seite. Ein Link aus dem Haupttext eines <article> zählt mehr als ein Link aus einem <aside>.
Häufige Fehler bei semantischem Markup
Die meisten Fehler entstehen aus der div-Gewohnheit oder aus einem falschen Verständnis davon, wofür ein Tag gedacht ist.
<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper"> <!-- no heading = not section -->
<img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
<img src="photo.jpg" alt="Photo description">
</div>
<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
<span class="icon">⚡</span>
<h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
<span class="icon" aria-hidden="true">⚡</span>
<h3>Fast delivery</h3>
</li>
<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
<h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
<h2>Our advantages</h2> <!-- h2 directly, no header wrapper -->
...
</section>
<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main> <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>
<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address> <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
<address>
<a href="mailto:hello@company.com">hello@company.com</a>
</address>
</footer>Ein weiteres häufiges Problem sind fehlende oder leere alt-Attribute. Bilder in <figure> brauchen entweder ein aussagekräftiges alt oder alt="", wenn das Bild dekorativ ist und durch <figcaption> beschrieben wird. Lassen Sie das alt-Attribut nie ganz weg: Das verstößt gegen die Barrierefreiheit und die HTML-Validierung.
<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
<img src="chart.png" alt="" role="presentation">
<figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>
<!-- Informative image: full alt text -->
<figure>
<img
src="html5-tags-map.png"
alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
>
<figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>
<!-- Mistake: no alt at all -->
<img src="diagram.png"> <!-- invalid! -->FAQ
Beeinflusst semantisches Markup die Google-Rankings direkt?
Kann man <article> in <article> verschachteln?
Worin unterscheiden sich <strong> von <b> und <em> von <i>?
Brauche ich role="main" zusammen mit dem <main>-Tag?
Und wie ist es bei Single-Page-Anwendungen (SPA) in React oder Vue?
Check it with SpiderHead
Free and local: run the audit on your own machine.
