EMZETT.
Login

Emzett Wiki

HTML + CSS: Semantisches HTML und Seitenaufbau

Properties1
tagsprogrammiersprachen, html-css

3 Min. Lesezeit

Kurz: Semantisches HTML bedeutet: Du wählst Elemente nach ihrer Bedeutung, nicht nach dem Aussehen. Das hilft Screenreadern, Suchmaschinen, Tastaturnutzern und deinem zukünftigen Ich.

Teil des Kurses HTML + CSS

Kapitel 9 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Semantisches HTML bedeutet: Du wählst Elemente nach ihrer Bedeutung, nicht nach dem Aussehen. Das hilft Screenreadern, Suchmaschinen, Tastaturnutzern und deinem zukünftigen Ich.

Gliederungselemente

<header>
  <h1>Mein Blog</h1>
  <nav aria-label="Hauptmenü"><a href="#">Start</a> <a href="#">Archiv</a> <a href="#">Kontakt</a></nav>
</header>
<main>
  <article>
    <h2>Ein toller Artikel</h2>
    <p><time datetime="2025-03-08">8. März 2025</time> von Mia</p>
    <section>
      <h3>Einleitung</h3>
      <p>Der Text beginnt hier.</p>
    </section>
    <section>
      <h3>Fazit</h3>
      <p>Und endet dort.</p>
    </section>
  </article>
  <aside>
    <h2>Das könnte dich auch interessieren</h2>
    <ul><li><a href="#">Anderer Artikel</a></li></ul>
  </aside>
</main>
<footer><p>&copy; 2025 Mia. <a href="#">Impressum</a> · <a href="#">Datenschutz</a></p></footer>
<style>
  header, footer { background: #e0e7ff; padding: 8px 12px; }
  article { background: #f8fafc; padding: 8px 12px; border: 1px solid #cbd5e1; }
  aside { background: #fef9c3; padding: 8px 12px; margin-top: 8px; }
</style>
ElementBedeutung
<header>Kopfbereich einer Seite oder eines Abschnitts
<nav>wichtige Navigation
<main>der Hauptinhalt, genau einmal pro Seite
<article>in sich geschlossener Beitrag (Blogartikel, Kommentar, Produktkarte)
<section>thematischer Abschnitt, mit Überschrift
<aside>Randbemerkung, Seitenleiste
<footer>Fußbereich
<figure>, <figcaption>Abbildung mit Beschriftung
<address>Kontaktinformation
<details>, <summary>aufklappbarer Bereich
<dialog>Dialogfenster

div und span: neutrale Container

Wenn kein passendes semantisches Element existiert, nimmst du <div> (Block) oder <span> (im Text). Sie haben keine Bedeutung und dienen als Haken für CSS und JavaScript.

<p>Der Preis beträgt <span style="color:crimson;font-weight:bold">9,99 €</span>.</p>

Faustregel: Gibt es ein Element, das die Bedeutung ausdrückt, nimm es. Erst danach div/span.

Aufklappbare Bereiche ohne JavaScript

<details>
  <summary>Wie lange dauert der Versand?</summary>
  <p>In Deutschland dauert er in der Regel 2 bis 3 Werktage.</p>
</details>
<details open>
  <summary>Kann ich zurückschicken?</summary>
  <p>Ja, innerhalb von 30 Tagen.</p>
</details>

<details> ist per Tastatur bedienbar und für Screenreader verständlich: ideal für FAQ.

Dialoge

<button id="auf">Dialog öffnen</button>
<dialog id="d">
  <form method="dialog">
    <p>Möchtest du wirklich löschen?</p>
    <button value="nein">Abbrechen</button>
    <button value="ja">Löschen</button>
  </form>
</dialog>
<script>
  const d = document.getElementById("d");
  document.getElementById("auf").onclick = () => d.showModal();
  d.addEventListener("close", () => console.log("Antwort:", d.returnValue));
</script>

showModal() verdunkelt den Hintergrund, sperrt ihn für Klicks, verwaltet den Fokus und schließt mit Esc.

Landmarks und Screenreader

Semantische Elemente erzeugen automatisch Landmarks (Orientierungspunkte). Screenreader-Nutzer springen damit direkt zu “Hauptinhalt” oder “Navigation”:

ElementLandmark
<header> (oberste Ebene)banner
<nav>navigation
<main>main
<aside>complementary
<footer> (oberste Ebene)contentinfo
<form> mit Namen, <section> mit Namenform, region

Überschriften-Hierarchie

Die Überschriften bilden das Inhaltsverzeichnis der Seite. Prüfe es: Wenn du nur die Überschriften liest, sollte die Seite verständlich sein. Keine Ebene überspringen, nur eine <h1>.

Typische Fehler

  • Alles aus divs bauen (“Div-Suppe”)
  • <section> ohne Überschrift
  • Mehrere <main> oder <main> im <article>
  • <nav> für jede Linkgruppe (nur für wichtige Navigation)
  • Klickbare divs statt <button> oder <a>

Merke

  • Semantische Elemente: header, nav, main, article, section, aside, footer
  • Genau ein <main>; <section> braucht eine Überschrift
  • <details>/<summary> und <dialog> bringen Funktion ohne viel JavaScript
  • div/span nur, wenn nichts Passenderes existiert
  • Gute Struktur hilft Screenreadern, SEO und Wartbarkeit

Übungsaufgabe

Gestalte die Struktur einer Blogseite mit Kopf, Navigation, zwei Artikeln, Seitenleiste und Fuß. Verwende nur semantische Elemente.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Formulare

Weiter: Audio, Video und eingebettete Inhalte

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks