Frontend Academy · Lektion

Semantisches HTML als Grundlage

Verwenden Sie native HTML-Elemente wie button, nav und Überschriften, um ohne zusätzlichen Aufwand integrierte Barrierefreiheit zu erhalten, bevor Sie auf ARIA zurückgreifen.

Semantisches HTML als Grundlage ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Semantisches HTML bietet Barrierefreiheit kostenlos

Das richtige HTML-Element bietet Ihnen Tastaturunterstützung, Ansagen für Screenreader und die korrekten ARIA-Rollen – kostenlos. Die meisten Barrierefreiheitsprobleme entstehen, weil statt des nativen Elements div + JavaScript verwendet wird.

button vs. div mit onClick

Ein <button> ist fokussierbar, wird von Screenreadern als „button“ angesagt, reagiert auf Enter/Leertaste und funktioniert beim Absenden von Formularen. Ein <div onClick> bietet nichts davon.

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

button für Buttons, a für Links verwenden

Wenn die Aktion zu einer URL navigiert, verwenden Sie <a href>. Wenn die Aktion etwas auf der Seite ausführt, verwenden Sie <button>. Verwenden Sie keine Anker als Buttons (kein href, nur onclick) – das verwirrt assistive Technologien.

Überschriften bilden die Dokumentstruktur

Verwenden Sie h1 bis h6 in der richtigen Reihenfolge, um eine logische Struktur zu erstellen. Nutzer von Screenreadern navigieren über Überschriften – das Überspringen von Ebenen (h1 -> h3) erzeugt verwirrende Lücken.

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

Landmark-Elemente

HTML5-Landmark-Elemente (header, nav, main, aside, footer) ermöglichen es Nutzern von Screenreadern, zwischen wichtigen Bereichen zu wechseln. Verwenden Sie pro Seite ein <main>-Element.

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

Listenelemente

Verwenden Sie <ul> für ungeordnete Listen, <ol> für geordnete Listen und <dl> für Definitionslisten. Screenreader sagen „Liste mit N Einträgen“ an – ein hilfreicher Hinweis für die Navigation.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

Formulare: Jedes Eingabefeld beschriften

Jedes Eingabefeld benötigt ein zugehöriges <label>. Das for/id-Paar verknüpft beide Elemente – ein Klick auf das Label fokussiert das Eingabefeld, und Screenreader sagen das Label beim Erreichen des Fokus an.

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

fieldset und legend für Gruppen

Gruppieren Sie zusammengehörige Eingabefelder (z. B. Optionsfelder) mit <fieldset> + <legend>. Screenreader sagen die Legende jedes Mal an, wenn ein zugehöriges Eingabefeld den Fokus erhält.

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

table-Elemente für Tabellendaten

Verwenden Sie <table> mit <thead>, <tbody> und <th scope="col"> – verwenden Sie Tabellen niemals für das Layout. Screenreader navigieren zweidimensional durch Zellen und sagen die Überschriften an.

article, section und figure

<article>: eigenständiger Inhalt (Blogbeitrag, Kommentar). <section>: thematische Gruppierung mit einer Überschrift. <figure> + <figcaption>: Medium mit Bildunterschrift.

ARIA nur bei Bedarf

Die erste ARIA-Regel lautet: Verwenden Sie kein ARIA. Natives HTML ist immer die bessere Wahl. Verwenden Sie ARIA nur, wenn kein semantisches Element zu Ihrem benutzerdefinierten Widget (Combobox, Tabs, Baum) passt.

Kurze Überprüfung

Warum wird <button onclick="..."> gegenüber <div onclick="..."> bevorzugt?

Zusammenfassung: Semantisches HTML

Verwenden Sie das richtige Element: button für Aktionen, a für Navigation, h1-h6 in der richtigen Reihenfolge für die Struktur, Landmark-Elemente (header, nav, main, footer), ul/ol für Listen, label für jedes Eingabefeld, fieldset/legend für Optionsfeldgruppen und table für Datentabellen. Natives HTML bietet Barrierefreiheit kostenlos. ARIA ist das letzte Mittel.

Häufig gestellte Fragen

Ist die Lektion „Semantisches HTML als Grundlage“ kostenlos?

Ja — der vollständige Text von „Semantisches HTML als Grundlage“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Semantisches HTML als Grundlage“?

Verwenden Sie native HTML-Elemente wie button, nav und Überschriften, um ohne zusätzlichen Aufwand integrierte Barrierefreiheit zu erhalten, bevor Sie auf ARIA zurückgreifen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Semantisches HTML als Grundlage“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy