it-praxisportal/courses/html_css/01_semantisches_html_und_struktur

HTML 01: Semantisches HTML & Dokumentenstruktur 🌱

Willkommen im Modul 01 des HTML5 & CSS3 Meisterkurses!

In diesem Modul lernst du, wie ein sauberes, valides HTML5-Dokument strukturiert wird und warum semantische Tags das Fundament moderner Webentwicklung, Barrierefreiheit (Accessibility) und Suchmaschinenoptimierung (SEO) bilden.

---

💡 1. Das Wichtigste in Kürze

Grundgerüst eines HTML5-Dokuments

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mein Portal</title>
</head>
<body>
  <!-- Sichtbarer Inhalt -->
</body>
</html>

Semantische Landmark-Tags im Überblick

• <header>: Einleitender Bereich der Webseite (Logo, Webseitentitel, Slogan) oder eines Artikels.
• <nav>: Navigationsbereich mit Links (meist als <ul> mit <li> und <a>).
• <main>: Repräsentiert den zentralen Hauptinhalt. Darf genau einmal pro HTML-Dokument vorkommen.
• <article>: Eigenständiger, thematisch abgeschlossener Beitrag (z.B. Blogpost, News-Meldung, Produktkarte).
• <section>: Thematisch zusammenhängender Abschnitt, typischerweise mit einer eigenen Überschrift (<h2> bis <h6>).
• <aside>: Beistell-Inhalte, Sidebar, Autoren-Biografie, thematisch verwandte Linklisten.
• <footer>: Fußzeile mit Copyright-Vermerk, rechtlichen Hinweisen, Kontaktlinks.

---

🎯 Teilziele in aufgabe.html

1. Doctype & Head: Richte <!DOCTYPE html>, <html lang="de">, <meta charset="UTF-8">, <meta name="viewport"> und <title> ein.
2. Kopfbereich & Navigation: Baue einen <header> mit <h1> und ein <nav>-Menü mit mindestens 3 Navigationslinks.
3. Hauptinhalt & Artikel: Erstelle ein <main>-Element mit einem <article>, der eine <h2>-Überschrift und Fließtext enthält.
4. Sektion & Sidebar: Ergänze innerhalb des Hauptbereichs eine <section> mit <h3> und eine <aside> für Zusatzinformationen.
5. Fußzeile: Erstelle ein <footer>-Element mit Copyright-Angabe (©).