Semantisches HTML

Warum semantisches HTML?

Semantisches HTML gibt den Elementen eine inhaltliche Bedeutung, nicht nur eine visuelle Darstellung. Es definiert die Struktur und den Zweck der Inhalte, was zahlreiche Vorteile bietet:

Verbesserte Zugänglichkeit: Screenreader und andere Hilfstechnologien können die Struktur der Seite besser interpretieren und an Nutzer mit Behinderungen vermitteln.
Optimierte Suchmaschinenplatzierung (SEO): Suchmaschinen verstehen den Inhalt besser und können ihn entsprechend höher bewerten.
Einfachere Wartbarkeit: Der Code wird lesbarer und verständlicher für alle Entwickler, die mit ihm arbeiten.
Konsistente Darstellung: Einheitlichere Darstellung über verschiedene Browser und Geräte hinweg.
Zukunftssicherheit: Bessere Anpassungsfähigkeit an neue Webtechnologien und Standards.

Statt generische Container wie <div> und <span> zu verwenden, nutzt semantisches HTML spezifische Elemente, die den Inhalt beschreiben.

Strukturelemente in HTML5

HTML5 führte eine Reihe von strukturellen Elementen ein, die Webseiten logisch gliedern:

<header>
  <!-- Kopfbereich der Seite oder eines Abschnitts -->
  <h1>Meine Webseite</h1>
  <nav>
    <!-- Navigationsbereich für Haupt- oder wichtige Navigation -->
    <ul>
      <li><a href="/">Startseite</a></li>
      <li><a href="/ueber-uns">Über uns</a></li>
      <li><a href="/kontakt">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- Hauptinhalt der Seite, sollte nur einmal pro Dokument vorkommen -->
  <article>
    <!-- Ein in sich geschlossener, unabhängiger Inhalt (z.B. Blogartikel) -->
    <h2>Aktueller Artikel</h2>
    <p>Inhalt des Artikels...</p>

    <section>
      <!-- Thematischer Abschnitt innerhalb des Artikels -->
      <h3>Erster Abschnitt</h3>
      <p>Text zum ersten Abschnitt...</p>
    </section>

    <section>
      <h3>Zweiter Abschnitt</h3>
      <p>Text zum zweiten Abschnitt...</p>
    </section>
  </article>

  <aside>
    <!-- Seitenleiste oder zusätzliche Information, die indirekt mit dem Hauptinhalt zusammenhängt -->
    <h3>Verwandte Artikel</h3>
    <ul>
      <li><a href="#">Artikel 1</a></li>
      <li><a href="#">Artikel 2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <!-- Fussbereich der Seite oder eines Abschnitts -->
  <p>&copy; 2025 Meine Webseite</p>
  <address>
    <!-- Kontaktinformationen -->
    Musterstrasse 123<br />
    12345 Musterstadt<br />
    <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

Beschreibung der Hauptstrukturelemente:

<header>: Enthält einführende Inhalte oder Navigationshilfen. Kann für die gesamte Seite oder für einzelne Abschnitte verwendet werden.
<nav>: Definiert einen Bereich mit Navigationslinks.
<main>: Bezeichnet den Hauptinhalt des Dokuments und sollte einzigartig auf der Seite sein.
<article>: Umschliesst eigenständigen Inhalt, der unabhängig vom Rest der Seite sinnvoll ist (z.B. ein Blogeintrag, Forumsbeitrag, Nachrichtenartikel).
<section>: Repräsentiert einen thematisch zusammenhängenden Inhaltsbereich, typischerweise mit einer Überschrift.
<aside>: Enthält Inhalte, die nur indirekt mit dem Hauptinhalt verbunden sind (z.B. Seitenleisten, verwandte Artikel).
<footer>: Enthält abschliessende Informationen wie Urheberrechtshinweise, Kontaktdaten oder verwandte Links.
<address>: Kennzeichnet Kontaktinformationen für den Autor oder Eigentümer des Dokuments oder Artikels.

Weitere semantische Elemente

HTML5 bietet viele weitere semantische Elemente für spezifische Inhaltszwecke:

<!-- Zeitangaben mit maschinenlesbarem Format -->
<p>
  Veröffentlicht am
  <time datetime="2025-04-25T14:30:00+02:00">25. April 2025 um 14:30 Uhr</time>
</p>

<!-- Markierung/Hervorhebung (wie ein Textmarker) -->
<p>
  Achten Sie besonders auf <mark>diesen wichtigen Hinweis</mark> in unserem
  Text.
</p>

<!-- Definition eines Begriffs -->
<p>
  <dfn>HTML</dfn> ist eine Auszeichnungssprache, die zur Strukturierung von
  Inhalten in Webseiten verwendet wird.
</p>

<!-- Abkürzung mit vollständigem Begriff beim Hover -->
<p>
  Diese Webseite wurde mit
  <abbr title="Hypertext Markup Language">HTML</abbr> und
  <abbr title="Cascading Style Sheets">CSS</abbr> erstellt.
</p>

<!-- Längeres Zitat mit Quellenangabe -->
<blockquote>
  <p>Der Erfolg hat viele Väter, der Misserfolg ist ein Waisenkind.</p>
  <cite>John F. Kennedy</cite>
</blockquote>

<!-- Inline-Zitat -->
<p>
  Wie Einstein sagte:
  <q>Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.</q>
</p>

<!-- Programmcode -->
<p>
  Um eine Variable in JavaScript zu deklarieren, verwenden Sie:
  <code>const name = 'Wert';</code>
</p>

<!-- Tastatureingabe -->
<p>Drücken Sie <kbd>Strg</kbd> + <kbd>S</kbd>, um das Dokument zu speichern.</p>

<!-- Variable in mathematischen oder programmtechnischen Kontexten -->
<p>Die Formel lautet: <var>a</var>² + <var>b</var>² = <var>c</var>²</p>

<!-- Ausgabe von Berechnungen oder Programmen -->
<p>Das Ergebnis ist: <output>64</output></p>

<!-- Fortschrittsanzeige für Aufgaben -->
<p>Download-Fortschritt: <progress value="70" max="100">70%</progress></p>

<!-- Meter für Werte innerhalb eines bekannten Bereichs -->
<p>
  Speichernutzung:
  <meter value="6" min="0" max="10" low="2" high="8" optimum="5">
    6 von 10
  </meter>
</p>

<!-- Ausklappbare Inhalte für FAQ oder zusätzliche Informationen -->
<details>
  <summary>Wie funktioniert semantisches HTML?</summary>
  <p>
    Semantisches HTML verwendet spezifische Tags, die die Bedeutung des Inhalts
    beschreiben, anstatt nur dessen Darstellung zu definieren.
  </p>
</details>

<!-- Bild mit Beschriftung -->
<figure>
  <img src="beispiel-bild.jpg" alt="Beispiel für semantisches HTML" />
  <figcaption>
    Abbildung 1: Beispiel einer semantischen HTML-Struktur
  </figcaption>
</figure>

Erklärung weiterer semantischer Elemente:

<time>: Kennzeichnet Uhrzeiten oder Datumsangaben und macht sie für Maschinen lesbar.
<mark>: Hebt Text hervor, als wäre er mit einem Textmarker markiert.
<dfn>: Definiert einen Begriff, der im Text erklärt wird.
<abbr>: Kennzeichnet Abkürzungen und kann den vollständigen Begriff im title-Attribut enthalten.
<blockquote> und <q>: Kennzeichnen längere bzw. kürzere Zitate.
<cite>: Gibt die Quelle eines Zitats oder einer kreativen Arbeit an.
<code>: Formatiert Text als Computercode.
<kbd>: Stellt eine Tastatureingabe dar.
<var>: Kennzeichnet eine Variable in mathematischen oder programmatischen Kontexten.
<output>: Repräsentiert das Ergebnis einer Berechnung.
<progress>: Zeigt den Fortschritt einer Aufgabe an.
<meter>: Stellt einen Wert innerhalb eines bekannten Bereichs dar.
<details> und <summary>: Erstellen einen ausklappbaren Bereich für zusätzliche Informationen.
<figure> und <figcaption>: Gruppieren eigenständige Inhalte (z.B. Bilder, Diagramme) mit ihren Beschriftungen.

Übung: Semantische Blog-Seite

Überarbeiten Sie die gesamte Struktur Ihres Blogs mit semantischen HTML5-Elementen:

Ersetzen Sie generische <div>-Container durch passende semantische Elemente
Jede Seite sollte nun folgende Elemente verwenden:
<header> für den Kopfbereich mit Logo und Seitentitel
<nav> für die Hauptnavigation
<main> für den Hauptinhalt
<footer> für den Fussbereich mit Copyright, Kontakt etc.

Verbessern Sie die “blog.html”-Seite und die einzelnen Artikel:

Jeder Blogbeitrag sollte in einem <article>-Element stehen
Verwenden Sie <section>-Elemente für thematische Abschnitte innerhalb der Artikel
Nutzen Sie <aside> für Inhalte wie “Verwandte Artikel”, “Über den Autor” oder “Beliebte Beiträge”
Verwenden Sie <time> für Veröffentlichungsdaten der Artikel mit maschinenlesbarem datetime-Attribut
Fügen Sie eine <header> in jedem Artikel ein, die Titel, Veröffentlichungsdatum und Autor enthält
Ergänzen Sie jeden Artikel mit einem passenden <footer>, der Tags, Kategorien oder Teilen-Links enthält

Ergänzen Sie weitere semantische Elemente sinnvoll:

<figure> und <figcaption> für alle Bilder mit Beschriftungen
<blockquote> und <cite> für Zitate in Ihren Artikeln
<address> für Kontaktinformationen im Seiten-Footer
<mark> für wichtige Begriffe oder Schlüsselwörter in Artikeln
<details> und <summary> für ausklappbare FAQ-Bereiche oder zusätzliche Informationen
<abbr> für Abkürzungen mit vollständiger Erklärung im title-Attribut
Verwenden Sie <code>, wenn Sie über Programmierung schreiben

Erstellen Sie eine neue Seite “kategorien.html” mit semantisch strukturierten Listen:

Eine Übersicht aller Blog-Kategorien
Für jede Kategorie eine Liste der zugehörigen Artikel mit Links
Verwenden Sie <section> für jede Kategorie
Nutzen Sie <nav> für die Gesamtübersicht der Kategorien
Fügen Sie kurze Beschreibungen zu jeder Kategorie hinzu
Zeigen Sie bei jedem Artikel das Veröffentlichungsdatum mit dem <time>-Element an

Bonus: Fortschrittsanzeigen mit semantischen Elementen

Erstellen Sie einen “Lebenslauf”- oder “Meilensteine”-Bereich mit dem semantischen <progress>-Element, um einen Fortschrittsbalken für verschiedene Fähigkeiten oder erreichte Ziele zu visualisieren. Ergänzen Sie dies mit dem <meter>-Element, um Werte innerhalb eines bekannten Bereichs anzuzeigen.

<section id="faehigkeiten">
  <h2>Meine Fähigkeiten</h2>

  <div class="skill">
    <h3>HTML</h3>
    <progress value="90" max="100">90%</progress>
    <p>Sehr gute Kenntnisse (90%)</p>
  </div>

  <div class="skill">
    <h3>CSS</h3>
    <progress value="75" max="100">75%</progress>
    <p>Fortgeschrittene Kenntnisse (75%)</p>
  </div>

  <div class="skill">
    <h3>JavaScript</h3>
    <progress value="60" max="100">60%</progress>
    <p>Gute Grundkenntnisse (60%)</p>
  </div>

  <h2>Projektstatus</h2>

  <div class="project">
    <h3>Blog-Redesign</h3>
    <meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="1">
      80% abgeschlossen
    </meter>
    <p>Status: Fortgeschritten (80%)</p>
  </div>

  <div class="project">
    <h3>Portfolio-Erstellung</h3>
    <meter value="0.4" min="0" max="1" low="0.3" high="0.7" optimum="1">
      40% abgeschlossen
    </meter>
    <p>Status: In Bearbeitung (40%)</p>
  </div>
</section>

Das <meter>-Element ist besonders nützlich für die Anzeige von Werten innerhalb eines bestimmten Bereichs:

value: Der aktuelle Wert
min und max: Die Grenzen des Bereichs
low, high und optimum: Definieren, welche Werte als niedrig, hoch oder optimal angesehen werden, was die visuelle Darstellung beeinflussen kann

Beispiel für die Struktur eines semantischen Blogartikels:

<article>
  <header>
    <h2>Einführung in semantisches HTML</h2>
    <p>
      Veröffentlicht von <a href="/autor/max">Max Mustermann</a> am
      <time datetime="2025-04-28">28. April 2025</time>
    </p>
  </header>

  <figure>
    <img
      src="semantisches-html.jpg"
      alt="Diagramm der semantischen HTML5-Elemente"
    />
    <figcaption>
      Abbildung: Übersicht der wichtigsten semantischen HTML5-Elemente
    </figcaption>
  </figure>

  <section>
    <h3>Was ist semantisches HTML?</h3>
    <p>
      Semantisches HTML verleiht dem Inhalt <mark>Bedeutung und Struktur</mark>,
      anstatt nur sein Erscheinungsbild zu definieren.
    </p>

    <blockquote>
      <p>
        Semantisches HTML ist die Grundlage für Zugänglichkeit, SEO und
        zukunftssichere Webentwicklung.
      </p>
      <cite>HTML5-Spezifikation</cite>
    </blockquote>

    <p>
      Der Begriff <dfn>Semantik</dfn> bezieht sich auf die Bedeutung von Wörtern
      und Zeichen.
    </p>
  </section>

  <section>
    <h3>Vorteile semantischer Elemente</h3>
    <p>
      Die Verwendung von
      <abbr title="Hypertext Markup Language 5">HTML5</abbr>-Elementen bietet
      zahlreiche Vorteile:
    </p>
    <ul>
      <li>Verbesserte Zugänglichkeit</li>
      <li>Bessere SEO-Ergebnisse</li>
      <li>Klarere Codestruktur</li>
    </ul>
  </section>

  <details>
    <summary>Häufig gestellte Fragen zu semantischem HTML</summary>
    <p>
      Hier finden Sie Antworten auf die häufigsten Fragen zum Thema semantisches
      HTML.
    </p>
    <!-- Weitere FAQ-Inhalte -->
  </details>

  <aside>
    <h4>Verwandte Artikel</h4>
    <ul>
      <li><a href="/html-grundlagen">HTML-Grundlagen verstehen</a></li>
      <li>
        <a href="/css-selektoren">CSS-Selektoren für semantische Elemente</a>
      </li>
    </ul>
  </aside>

  <footer>
    <p>
      Kategorien: <a href="/kategorie/html">HTML</a>,
      <a href="/kategorie/webdesign">Webdesign</a>
    </p>
    <p>
      Tags: <a href="/tag/semantik">Semantik</a>,
      <a href="/tag/struktur">Struktur</a>, <a href="/tag/html5">HTML5</a>
    </p>
  </footer>
</article>

Vorteile der semantischen Strukturierung:

Bessere Zugänglichkeit: Screenreader können die Seitenstruktur korrekt interpretieren und Nutzern mit Behinderungen eine bessere Navigation ermöglichen.
Verbesserte SEO: Suchmaschinen können Inhalte besser verstehen und indexieren.
Zukunftssicherheit: Semantisches HTML ist besser auf zukünftige Webtechnologien und Standards vorbereitet.
Klarere Entwicklung: Die Code-Basis ist leichter zu verstehen und zu warten.
Konsistente Styling-Grundlage: Semantische Elemente bieten eine bessere Basis für CSS-Styling.

Durch die konsequente Anwendung semantischer HTML-Elemente schaffen Sie nicht nur eine besser strukturierte Webseite, sondern verbessern auch die Nutzererfahrung für alle Besucher, unabhängig davon, wie sie auf Ihre Inhalte zugreifen.