Tag 6: Semantisches HTML & Barrierefreiheit

Ziel

Lerne, wie man modernes, strukturiertes und barrierefreies HTML mit semantischen Tags und korrekter Auszeichnung schreibt.

Themen

• Semantische HTML-Tags: <header>, <footer>, <main>, <section>, <article>, <nav>
• Barrierefreiheit: alt für Bilder, aria-label, korrektes Labeling von Formularen

Semantisches HTML

Semantische Tags geben dem Inhalt Bedeutung und machen ihn für Menschen, Suchmaschinen und Hilfstechnologien leichter verständlich.

Beispiele

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>
  <section>
    <h2>About Me</h2>
    <p>This is a section about myself.</p>
  </section>

  <article>
    <h2>Blog Post</h2>
    <p>This is an article about HTML.</p>
  </article>
</main>

<footer>
  <p>© 2026 My Website</p>
</footer>

Barrierefreiheit

Barrierefreiheit stellt sicher, dass alle Menschen deine Website nutzen können, auch Personen mit Einschränkungen.

• Füge immer alt-Attribute für Bilder hinzu:

<img src="photo.jpg" alt="Description of the photo">

• Nutze aria-label für benutzerdefinierte Steuerelemente oder Icons:

<button aria-label="Close menu"></button>

• Verknüpfe <label>-Elemente korrekt mit Formularfeldern über das for-Attribut.

Übung

Konvertiere eine einfache HTML-Seite so, dass sie semantische Tags nutzt und barrierefreier wird:

• Füge <header>, <footer>, <main> und <section> an passenden Stellen hinzu.
• Stelle sicher, dass alle Bilder aussagekräftige alt-Texte haben.
• Erstelle eine Navigationsleiste mit <nav> und Links zu verschiedenen Seiten/Bereichen.

Beispiel

<header>
  <h1>My Portfolio</h1>
</header>

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>I am learning semantic HTML to make my pages structured and accessible.</p>
    <img src="myphoto.jpg" alt="Photo of me">
  </section>

  <section id="projects">
    <h2>My Projects</h2>
    <article>
      <h3>Project 1</h3>
      <p>Description of project 1.</p>
    </article>
  </section>
</main>

<footer>
  <p>© 2026 My Portfolio</p>
</footer>