Ausführbare HTML-Docs: Semantisches HTML

Q: Welche semantischen Tags gibt es in HTML?

Die Layout-Tags sind , , , , , und . Weitere häufige semantische Tags sind , , , , , und die Überschriften bis .

Q: Ist div ein semantisches Element?

Nein. hat keine eigene Bedeutung; es ist ein allgemeiner Kasten für Styling und Layout. Nimm es, wenn kein semantisches Tag passt, und nimm , , und die anderen, wenn eines passt.

Q: Wie viele main-Elemente darf eine Seite haben?

Ein sichtbares pro Seite. Es umschließt den Inhalt, der nur auf dieser Seite steht, und sollte nicht in , , , oder stehen.

Was semantisches HTML ist

Semantisches HTML heißt, jedes Tag danach auszuwählen, was der Inhalt ist: Navigation kommt in <nav>, der Hauptinhalt in <main>, ein Blogbeitrag in <article>. Die Tags sehen aus wie einfache Kästen, aber sie sagen dem Browser, Screenreadern und Suchmaschinen, was jeder Teil der Seite tut. Hier ist eine ganze Seite aus den semantischen Layout-Tags, jedes umrandet und beschriftet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Lösch das <style>-Element, und die Seite sieht aus wie reiner Text, aber die Struktur ist immer noch da, für jeden, der den Code liest, und für Software, die ihn liest, ohne auf die Pixel zu schauen.

Die semantischen Layout-Tags

Tag	Nimm es für	Landmark für Screenreader
`<header>`	Die Einleitung der Seite oder eines Artikels: Logo, Titel, Autorenzeile	banner (nur wenn es nicht in `article`, `aside`, `main`, `nav` oder `section` steht)
`<nav>`	Einen Block mit wichtigen Navigationslinks	navigation
`<main>`	Den Inhalt, der nur auf dieser Seite steht, einmal pro Seite	main
`<article>`	Einen eigenständigen Beitrag, der für sich allein Sinn ergibt: ein Post, ein Kommentar, eine Produktkarte	standardmäßig keine
`<section>`	Eine thematische Gruppe von Inhalten mit eigener Überschrift	region, nur wenn es einen zugänglichen Namen hat
`<aside>`	Verwandten Inhalt neben dem Hauptfluss: eine Seitenleiste, eine Notiz	complementary
`<footer>`	Abschließende Infos der Seite oder eines Artikels: Copyright, Autor, Links	contentinfo (nur auf Seitenebene)

Jedes Tag hat eine eigene Seite mit mehr Details: header, nav, section und footer. Diese Seite zeigt, wie sie zusammenpassen.

Warum nicht einfach div

Eine Seite nur aus <div>-Elementen kann genauso aussehen wie eine semantische. Der Unterschied liegt darin, was das Markup aussagt. Drück die Buttons, um in jeder Version die Elemente zu umranden, die Bedeutung tragen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Die div-Version findet 0, die semantische Version findet 4. Genau das sehen Hilfstechnologien: Ein Screenreader-Nutzer kann auf der semantischen Seite direkt zur Navigation oder zum Hauptinhalt springen und muss sich auf der div-Seite durch alles hindurchlesen. Klassennamen wie class="nav" bedeuten dem Browser nichts.

<div> bleibt die richtige Wahl für Kästen, die nur für Styling oder Layout existieren, wie der Flex-Wrapper .cols im ersten Beispiel.

main, article und aside

<main> umschließt, was nur auf dieser Seite steht, und kommt einmal vor. Darin markiert <article> Inhalt, der für sich allein auch auf eine andere Website kopiert Sinn ergäbe, und <aside> markiert Inhalt, der dazugehört, aber entfernt werden könnte, ohne den Artikel kaputt zu machen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

Der Artikel hat seinen eigenen <header> und <footer>. Sie sind nicht auf die Seitenebene beschränkt: Jedes leitet seinen nächstgelegenen Artikel oder Abschnitt ein oder schließt ihn ab. Das Element <time datetime> gibt das Datum maschinenlesbar an und zeigt es trotzdem in lesbarer Form.

Prüf die Gliederung deiner Überschriften

Überschriften sind die andere Hälfte der Struktur. Screenreader-Nutzer bewegen sich oft von Überschrift zu Überschrift durch eine Seite, deshalb sollten die Ebenen sich wie ein Inhaltsverzeichnis ohne übersprungene Ebenen lesen. Dieses Skript gibt die Gliederung der Seite aus, in der es läuft:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

Das h4 unter „Brewing“ überspringt eine Ebene. Ändere es in h3, und die Gliederung liest sich sauber. Wähle Überschriftenebenen nach der Struktur und ändere ihre Größe mit CSS, wenn du sie größer oder kleiner willst.

Weitere semantische Tags

Bei Semantik geht es nicht nur um Layout. Auch diese Tags auf Textebene tragen Bedeutung:

Tag	Bedeutung
`<strong>`	Wichtiger Text (standardmäßig fett)
`<em>`	Betonung (standardmäßig kursiv)
`<figure>` und `<figcaption>`	Ein Bild, Diagramm oder Codebeispiel mit seiner Bildunterschrift
`<time datetime="...">`	Ein Datum oder eine Uhrzeit in maschinenlesbarer Form
`<address>`	Kontaktdaten des Autors der Seite oder des Artikels
`<mark>`	Hervorgehobener Text, etwa ein Suchtreffer
`<abbr title="...">`	Eine Abkürzung mit ihrer vollen Form
`<button>`	Etwas, das eine Aktion ausführt

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Fahr mit der Maus über die Abkürzung „W3C“, um ihre volle Form in einem Tooltip zu sehen.

Häufige Fehler

Ein Tag wegen seines Aussehens verwenden. <blockquote> ist für Zitate, nicht für Einrückungen; <h3> ist für eine Überschriftenebene, nicht für mittelgroßen fetten Text. Style mit CSS.
Alles in <section> packen. Ein Abschnitt sollte eine Überschrift und ein Thema haben. Wenn du einen Kasten zum Stylen brauchst, nimm <div>.
Mehr als ein sichtbares <main>. Behalte eines pro Seite und verschachtle es nie in <article>, <aside>, <header>, <nav> oder <footer>.
Jede Linkliste in <nav> setzen. Heb es dir für wichtige Navigationsblöcke auf, etwa das Menü der Website oder ein Inhaltsverzeichnis. Ein paar Links im Footer brauchen keins.
Anklickbare <div>-Elemente. Ein <div onclick> ist per Tastatur nicht erreichbar. Nimm <button> für Aktionen und <a href> für Navigation.

Häufig gestellte Fragen

Was ist semantisches HTML?

Semantisches HTML ist Markup, bei dem jedes Tag die Bedeutung seines Inhalts beschreibt: <nav> für Navigation, <article> für einen eigenständigen Beitrag, <button> für einen Button. Browser, Screenreader und Suchmaschinen verstehen die Seite dann, ohne aus Klassennamen oder Styles raten zu müssen.

Welche semantischen Tags gibt es in HTML?

Die Layout-Tags sind <header>, <nav>, <main>, <article>, <section>, <aside> und <footer>. Weitere häufige semantische Tags sind <figure>, <figcaption>, <time>, <address>, <strong>, <em> und die Überschriften <h1> bis <h6>.

Ist div ein semantisches Element?

Nein. <div> hat keine eigene Bedeutung; es ist ein allgemeiner Kasten für Styling und Layout. Nimm es, wenn kein semantisches Tag passt, und nimm <header>, <main>, <nav> und die anderen, wenn eines passt.

Wofür ist das aside-Tag da?

<aside> enthält Inhalt, der mit dem Hauptinhalt zusammenhängt, aber nicht zu seinem Fluss gehört: eine Seitenleiste, einen Kasten mit verwandten Links, eine Glossar-Notiz oder ein hervorgehobenes Zitat. Auf Seitenebene führen Screenreader es als ergänzende Landmark (complementary) auf.

Wie viele main-Elemente darf eine Seite haben?

Ein sichtbares <main> pro Seite. Es umschließt den Inhalt, der nur auf dieser Seite steht, und sollte nicht in <header>, <nav>, <article>, <aside> oder <footer> stehen.

Hilft semantisches HTML bei SEO?

Es hilft Suchmaschinen zu verstehen, welcher Teil der Seite der Hauptinhalt ist, welcher die Navigation und wie Überschriften zusammenhängen. Allein ist es keine Abkürzung zu besseren Rankings, aber es nimmt das Raten weg und verbessert die Barrierefreiheit, was sich ohnehin lohnt.

Verwandte Konzepte