Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- it-themen:webdesign:html:semantische [27.12.2025 00:44] – [Beispiel einer sauberen Seitenstruktur] lars
+++ it-themen:webdesign:html:semantische [27.12.2025 00:54] (aktuell) – [Merksatz] lars
@@ Zeile 37: / Zeile 37: @@
-<code: html linenum>
+<code: html linenums>
 <!DOCTYPE html>
 <html lang="de">
@@ Zeile 80: / Zeile 80: @@
 </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.