Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- it-themen:webdesign:html:semantische [27.12.2025 00:40] – angelegt lars
+++ it-themen:webdesign:html:semantische [27.12.2025 00:54] (aktuell) – [Merksatz] lars
@@ Zeile 16: / Zeile 16: @@
 Moderne HTML-Struktur verwendet **sprechende Elemente**,
 die den Zweck eines Bereichs klar benennen.
+---
+===== Wichtige semantische Elemente =====
+^ Element ^ Bedeutung ^
+| `<header>` | Kopfbereich einer Seite oder Sektion |
+| `<nav>` | Navigation |
+| `<main>` | Hauptinhalt der Seite |
+| `<section>` | thematischer Abschnitt |
+| `<article>` | eigenständiger Inhalt |
+| `<aside>` | ergänzender Inhalt |
+| `<footer>` | Fußbereich |
+---
+===== Beispiel einer sauberen Seitenstruktur =====
+<code: html linenums>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Beispielseite</title>
+</head>
+<body>
+<header>
+  <h1>Meine Webseite</h1>
+</header>
+<nav>
+  <ul>
+    <li><a href="#">Start</a></li>
+    <li><a href="#">Kontakt</a></li>
+  </ul>
+</nav>
+<main>
+  <section>
+    <h2>Ein Abschnitt</h2>
+    <p>Textinhalt</p>
+  </section>
+  <article>
+    <h2>Artikel</h2>
+    <p>Eigenständiger Inhalt</p>
+  </article>
+</main>
+<aside>
+  <p>Zusatzinformationen</p>
+</aside>
+<footer>
+  <p>&copy; 2025</p>
+</footer>
+</body>
+</html>
+</code>
+---
+===== Unterschiede: section vs. article =====
+^ Element ^ Verwendung ^
+| `<section>` | thematische Gruppierung |
+| `<article>` | eigenständig nutzbarer Inhalt |
+---
+===== Typische Fehler =====
+  * `<div>` statt semantischer Elemente
+  * Mehrere `<main>`-Elemente
+  * Navigation außerhalb von `<nav>`
+  * Semantik nur für Styling missbrauchen
+---
+===== Barrierefreiheit (Grundlagen) =====
+  * Jedes `<img>` benötigt ein `alt`-Attribut
+  * Überschriften müssen logisch verschachtelt sein
+  * Semantik hilft Screenreadern beim Verständnis
+===== Merksatz =====
+Semantik beschreibt **was** ein Inhalt ist,\\
+CSS beschreibt **wie** er aussieht.