it-themen:webdesign:html:semantische

Wichtige semantische Elemente

Element

Bedeutung

` | Kopfbereich einer Seite oder Sektion |

`<nav>`

Navigation

`<main>`

Hauptinhalt der Seite

` | thematischer Abschnitt |

` | eigenständiger Inhalt |

` | ergänzender Inhalt |

` | Fußbereich |

—

Beispiel einer sauberen Seitenstruktur

<!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>

—

Unterschiede: section vs. article

Element	Verwendung

Inhaltsverzeichnis

HTML – Semantische Elemente

Grundidee

Wichtige semantische Elemente