Kapitel 9: HTML-Bereichs-Tags

📐 Lernziel: Bereichs-Tags beherrschen - das Grundgerüst für Webseiten-Layouts!

9.1 Block-Ebene Bereichs-Tag: div

Das <div>-Tag ist der wichtigste Container für Webseiten-Layouts.

Was ist ein div?

Ein Block-Ebene Element (nimmt die gesamte Breite ein)
Dient als Container für andere Elemente
Hat keine semantische Bedeutung (reines Struktur-Element)

Syntax:

html

<div>
  <!-- Hier können beliebige Inhalte stehen -->
  <h2>Überschrift</h2>
  <p>Absatz Text</p>
</div>

Verwendung:

html

<!-- Seitenbereich aufteilen -->
<div class="header">
  <h1>Webseitentitel</h1>
</div>

<div class="main-content">
  <p>Hier ist der Hauptinhalt...</p>
</div>

<div class="footer">
  <p>Copyright 2026</p>
</div>

Darstellung:

┌─────────────────────────────────────┐
│  <div class="header">             │
│    Webseitentitel                  │
│  </div>                           │
├─────────────────────────────────────┤
│  <div class="main-content">       │
│    Hier ist der Hauptinhalt...    │
│  </div>                           │
├─────────────────────────────────────┤
│  <div class="footer">             │
│    Copyright 2026                  │
│  </div>                           │
└─────────────────────────────────────┘

9.2 Inline-Bereichs-Tag: span

Das <span>-Tag ist ein Inline-Container für Textbereiche.

Was ist ein span?

Ein Inline Element (nimmt nur so viel Breite ein wie nötig)
Dient zur lokalen Textformatierung
Hat keine semantische Bedeutung

Syntax:

html

<p>Dieser Text ist <span class="highlight">hervorgehoben</span>.</p>

Verwendung:

html

<!-- Text lokal formatieren -->
<p>Der Preis beträgt <span class="price">99,99 €</span>.</p>

<!-- Inline-Elemente gruppieren -->
<p>Kontaktieren Sie uns: 
  <span class="contact">
    <a href="mailto:info@beispiel.de">E-Mail</a> | 
    <a href="tel:+49123456789">Telefon</a>
  </span>
</p>

Unterschied zwischen div und span:

Tag	Ebene	Verwendung
`<div>`	Block-Ebene	Große Bereiche, Layout-Struktur
`<span>`	Inline-Ebene	Kleine Textbereiche, lokale Formatierung

9.3 HTML5 semantische Bereichs-Tags (SEO-wichtig!)

HTML5 führte semantische Tags ein - Tags mit Bedeutung!

Wichtige semantische Tags:

Tag	Bedeutung	Verwendung
`<header>`	Kopfbereich	Logo, Navigation, Seitentitel
`<nav>`	Navigation	Hauptnavigationslinks
`<main>`	Hauptinhalt	Einmalig pro Seite!
`<section>`	Abschnitt	Thematisch zusammengehöriger Inhalt
`<article>`	Artikel	Eigenständiger Inhalt (Blogpost, News)
`<aside>`	Seitenleiste	Zusatzinformationen
`<footer>`	Fußbereich	Copyright, Kontakt, Sitemap

Beispiel - Vollständige Seitenstruktur:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
</head>
<body>
  <header>
    <h1>Meine Webseite</h1>
    <nav>
      <a href="index.html">Start</a>
      <a href="über-uns.html">Über uns</a>
      <a href="kontakt.html">Kontakt</a>
    </nav>
  </header>
  
  <main>
    <section>
      <h2>Willkommen!</h2>
      <p>Hier ist der Hauptinhalt...</p>
    </section>
    
    <aside>
      <h3>Neuigkeiten</h3>
      <p>Aktuelle Updates...</p>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2026 Meine Webseite</p>
  </footer>
</body>
</html>

9.4 Vorteile semantischer Tags

1. SEO-Optimierung

Suchmaschinen verstehen den Inhalt besser
Besseres Ranking in Suchergebnissen

2. Barrierefreiheit

Screenreader können Seitenstruktur vorlesen
Bessere Benutzererfahrung für Sehbehinderte

3. Code-Wartbarkeit

Code ist lesbarer und verständlicher
Bessere Zusammenarbeit im Team

4. Zukunftssicherheit

Semantische Tags sind Standard in HTML5
Bessere Kompatibilität mit modernen Browsern

Vergleich:

html

<!-- ❌ Nicht semantisch (alt) -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- ✅ Semantisch (modern) -->
<header>...</header>
<nav>...</nav>
<main>...</main>

9.5 Praxis: Seitengrundgerüst mit Bereichs-Tags

Aufgabe: Erstelle das Grundgerüst einer Webseite mit semantischen Tags.

Lösung:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mein Blog</title>
</head>
<body>
  <!-- Header-Bereich -->
  <header>
    <h1>Mein persönlicher Blog</h1>
    <nav>
      <ul>
        <li><a href="index.html">Startseite</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="über-mich.html">Über mich</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- Hauptinhalt -->
  <main>
    <section>
      <h2>Neueste Artikel</h2>
      <article>
        <h3>Wie ich HTML gelernt habe</h3>
        <p>In diesem Artikel teile ich meine Erfahrungen...</p>
      </article>
    </section>
    
    <aside>
      <h3>Über den Autor</h3>
      <p>Ich bin ein angehender Webentwickler...</p>
    </aside>
  </main>
  
  <!-- Footer-Bereich -->
  <footer>
    <p>&copy; 2026 Mein Blog. Alle Rechte vorbehalten.</p>
    <p>Kontakt: <a href="mailto:info@meinblog.de">info@meinblog.de</a></p>
  </footer>
</body>
</html>

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ <div>-Tag für Block-Ebenen-Layouts
✅ <span>-Tag für Inline-Textbereiche
✅ HTML5 semantische Tags (<header>, <nav>, <main>, etc.)
✅ Vorteile semantischer Entwicklung (SEO + Barrierefreiheit)
✅ Ein vollständiges Seitengrundgerüst zu erstellen

🎯 Nächster Schritt: In Kapitel 10 lernst du Formular-Tags - die Grundlage für Benutzerinteraktion!

← Zurück zu Kapitel 8: Tabellen-TagsWeiter zu Kapitel 10: Formular-Tags →

Kapitel 9: HTML-Bereichs-Tags ​

9.1 Block-Ebene Bereichs-Tag: div ​

9.2 Inline-Bereichs-Tag: span ​

9.3 HTML5 semantische Bereichs-Tags (SEO-wichtig!) ​

9.4 Vorteile semantischer Tags ​

9.5 Praxis: Seitengrundgerüst mit Bereichs-Tags ​

✅ Zusammenfassung ​

Kapitel 9: HTML-Bereichs-Tags

9.1 Block-Ebene Bereichs-Tag: div

9.2 Inline-Bereichs-Tag: span

9.3 HTML5 semantische Bereichs-Tags (SEO-wichtig!)

9.4 Vorteile semantischer Tags

9.5 Praxis: Seitengrundgerüst mit Bereichs-Tags

✅ Zusammenfassung