Was sind semantische Elemente in HTML und wofür sind…

Semantische Elemente in HTML sind Tags (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), die die semantische Bedeutung des Inhalts beschreiben, den sie umschließen, und nicht nur sein Aussehen.

Hauptzweck:

Barrierefreiheit: Helfen assistiven Technologien (Screenreadern), die Struktur und den Inhalt der Seite zu verstehen, wodurch Inhalte für Nutzer mit Einschränkungen zugänglich gemacht werden.
SEO (Suchmaschinenoptimierung): Suchmaschinen indexieren und bewerten Seiten mit semantischer Markup besser, da sie den Hauptinhalt und seine Relevanz für Anfragen genauer bestimmen können.
Entwicklung und Wartung: Verbessern die Lesbarkeit und Wartbarkeit des Codes, wodurch die Seitenstruktur für andere Entwickler (und für Sie selbst in Zukunft) verständlicher wird.
Verbessertes Verständnis der Struktur: Ermöglichen eine klare Trennung der logischen Blöcke der Seite (Navigation, Hauptinhalt, Fußzeile usw.).

Beispiel für nicht-semantisches Markup:

<div>
  <h2>Artikelüberschrift</h2>
  <p>Inhalt des Artikels...</p>
</div>
<div>
  <h3>Seitenleiste</h3>
  <p>Informationen in der Seitenleiste...</p>
</div>

Beispiel für semantisches Markup:

<article>
  <h2>Artikelüberschrift</h2>
  <p>Inhalt des Artikels...</p>
</article>
<aside>
  <h3>Seitenleiste</h3>
  <p>Informationen in der Seitenleiste...</p>
</aside>

Die Verwendung semantischer Elemente trägt dazu bei, strukturiertere, zugänglichere und für Suchmaschinen optimierte Webseiten zu erstellen.

Was sind semantische Elemente in HTML und wofür sind sie notwendig?