Alexander Bier

HTML (HyperText Markup Language) ist das Rückgrat des Webs und spielt eine zentrale Rolle bei der Gestaltung und Strukturierung von Webseiten. Ein besonders wichtiger Aspekt von HTML ist die Semantik, die darauf abzielt, den Inhalt von Webseiten so zu strukturieren, dass ihre Bedeutung und Struktur sowohl für Menschen als auch für Maschinen (wie Suchmaschinen und Screenreader) klar und verständlich ist. Ein hervorragendes Beispiel für eine gut barrierefreie Webseite, an der ich mitgearbeiten durfte, ist www.museumfuernaturkunde.berlin.

Warum ist HTML-Semantik wichtig?

1. Verbesserte Zugänglichkeit

Semantische HTML-Tags helfen Screenreadern und anderen assistiven Technologien, den Inhalt der Seite besser zu verstehen und zu navigieren. Dies ist besonders wichtig für Benutzer mit Behinderungen. Screenreader nutzen die Struktur, die durch semantische Tags bereitgestellt wird, um den Inhalt in einer sinnvollen Reihenfolge zu präsentieren und um wichtige Informationen wie Überschriften, Abschnitte und Artikel zu identifizieren.

2. SEO (Suchmaschinenoptimierung)

Suchmaschinen nutzen semantische HTML-Tags, um den Inhalt und die Struktur einer Seite zu interpretieren. Eine bessere Semantik kann zu einer höheren Platzierung in den Suchergebnissen führen, da Suchmaschinen den Inhalt genauer analysieren und indexieren können.

3. Lesbarkeit und Wartbarkeit des Codes

Semantisches HTML ist leichter zu lesen und zu pflegen. Entwickler können schneller verstehen, was verschiedene Teile des Dokuments darstellen sollen. Dies erleichtert die Zusammenarbeit und das langfristige Management von Webprojekten.

4. Wiederverwendbarkeit und Konsistenz

Durch die Verwendung semantischer Tags können Stile und Skripte einheitlich auf ähnliche Elemente angewendet werden, was die Wiederverwendbarkeit und Konsistenz im Design fördert.

Negative Beispiele und ihre Verbesserung

Um die Bedeutung der HTML-Semantik besser zu verstehen, schauen wir uns zunächst einige negative Beispiele an und wie diese verbessert werden können.

<div id="nav">
  <a href="#home">Home</a>
  <a href="#about">Über uns</a>
  <a href="#services">Dienstleistungen</a>
  <a href="#contact">Kontakt</a>
</div>

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Über uns</a></li>
    <li><a href="#services">Dienstleistungen</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>

<div class="title">Willkommen auf unserer Webseite</div>
<p>Hier finden Sie Informationen zu unseren Dienstleistungen.</p>

<h1>Willkommen auf unserer Webseite</h1>
<p>Hier finden Sie Informationen zu unseren Dienstleistungen.</p>

<div class="content">
  <div class="section">
    <h2>Über uns</h2>
    <p>Wir sind ein fiktives Unternehmen, das als Beispiel dient.</p>
  </div>
  <div class="section">
    <h2>Unsere Dienstleistungen</h2>
    <p>Wir bieten maßgeschneiderte Webdesign-Dienstleistungen an.</p>
  </div>
</div>

<main>
  <section>
    <h2>Über uns</h2>
    <p>Wir sind ein fiktives Unternehmen, das als Beispiel dient.</p>
  </section>
  <section>
    <h2>Unsere Dienstleistungen</h2>
    <p>Wir bieten maßgeschneiderte Webdesign-Dienstleistungen an.</p>
  </section>
</main>

Wichtige semantische HTML-Tags

Hier sind einige der wichtigsten semantischen HTML-Tags, ihre Bedeutung und ihre typischen Verwendungszwecke:

1. <header>

Der <header>-Tag wird verwendet, um einführende Inhalte oder eine Gruppe von Navigationslinks zu umschließen. Ein Header-Element enthält typischerweise eine Gruppe von einführenden oder navigationsunterstützenden Inhalten.

<header>
  <h1>Website-Titel</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">Über uns</a></li>
      <li><a href="#contact">Kontakt</a></li>
    </ul>
  </nav>
</header>

2. <nav>

Der <nav>-Tag definiert einen Abschnitt mit Navigationslinks. Dieses Tag wird verwendet, um die Hauptnavigation einer Website zu kennzeichnen.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Dienstleistungen</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>

3. <main>

Das <main>-Tag kennzeichnet den Hauptinhalt des <body>, der einzigartig und direkt mit dem zentralen Thema der Seite oder Anwendung verbunden ist.

<main>
  <article>
    <h1>Hauptartikel-Titel</h1>
    <p>Hier steht der Hauptinhalt des Artikels.</p>
  </article>
</main>

4. <section>

Der <section>-Tag definiert thematische Gruppen von Inhalten, typischerweise mit einer eigenen Überschrift. Dieser Tag sollte verwendet werden, um größere Abschnitte von Inhalt zu gliedern.

<section>
  <h2>Abschnittsüberschrift</h2>
  <p>Dieser Abschnitt behandelt ein bestimmtes Thema.</p>
</section>

5. <article>

Das <article>-Tag repräsentiert einen in sich geschlossenen Bestandteil einer Seite, der unabhängig verteilt oder wiederverwendet werden könnte. Dies könnte ein Blogeintrag, ein Kommentar oder ein Nachrichtenartikel sein.

<article>
  <h2>Artikel-Titel</h2>
  <p>Dies ist der Inhalt des Artikels.</p>
</article>

6. <aside>

Der <aside>-Tag definiert Inhalte, die indirekt mit dem Hauptinhalt der Seite verbunden sind. Typischerweise sind dies Seitenleisten, Zitate oder verwandte Links.

<aside>
  <h2>Zusätzliche Informationen</h2>
  <p>Hier sind einige Links zu verwandten Inhalten und weiterführenden Informationen.</p>
</aside>

7. <footer>

Der <footer>-Tag definiert den Fußbereich eines Dokuments oder Abschnitts. Ein Footer kann Autoreninformationen, Copyright-Informationen, Links zu verwandten Dokumenten usw. enthalten.

<footer>
  <p>&copy; 2024 Mein Unternehmen. Alle Rechte vorbehalten.</p>
</footer>

8. <figure> und <figcaption>

Der <figure>-Tag wird verwendet, um in sich geschlossene Inhalte zu gruppieren, wie z.B. Abbildungen, Diagramme oder Codebeispiele, zusammen mit einer optionalen Beschriftung durch den <figcaption>-Tag.

<figure>
  <img src="bild.jpg" alt="Beschreibung des Bildes">
  <figcaption>Bildbeschreibung oder Quelle</figcaption>
</figure>

Bedeutung von Attributen für die Barrierefreiheit

Neben den semantischen Tags spielen auch HTML-Attribute eine wichtige Rolle bei der Barrierefreiheit. Hier sind einige wichtige Attribute:

1. alt-Attribut

Das alt-Attribut wird für Bilder verwendet, um eine alternative Textbeschreibung bereitzustellen. Dies ist besonders wichtig für blinde oder sehbehinderte Benutzer, die Screenreader verwenden.

<img src="bild.jpg" alt="Beschreibung des Bildes">

2. aria-label

Das aria-label-Attribut kann verwendet werden, um einem Element eine zugängliche Kurzbeschreibung hinzuzufügen.

<button aria-label="Abspielen">▶️</button>

3. aria-labelledby

Das aria-labelledby-Attribut wird verwendet, um die Beziehung zwischen einem Element und einem anderen Element, das es beschreibt, festzulegen.

<div id="beschreibung">Dies ist eine Beschreibung.</div>
<button aria-labelledby="beschreibung">Button</button>

4. role

Das role-Attribut kann verwendet werden, um die Rolle eines nicht-semantischen HTML-Elements zu definieren. Dies sollte jedoch nur verwendet werden, wenn kein geeignetes semantisches HTML-Tag vorhanden ist.

<div role="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Über uns</a></li>
    <li><a href="#

services">Dienstleistungen</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</div>