Hallo Sommercamp! Ich bin ein einfacher Container

HTML: <div> – der einfache Container

Ein <div> bündelt Inhalte. Er besitzt keine eigene Bedeutung, ist aber ideal zum Strukturieren und Gestalten von Bereichen.

Wann nutze ich ein <div>?

  • Zum Gruppieren von Elementen
  • Für visuelle Bereiche wie Boxen, Spalten oder Karten
  • Zum Anwenden von CSS-Layouts wie Flexbox oder Grid
  • Wenn kein passendes semantisches Element existiert

Beispiel

<div style="padding:16px; border:1px solid #1e2a48; border-radius:12px;">
  <h2>Hallo Sommercamp!</h2>
  <p>Ich bin ein einfacher Container.</p>
</div>

Mehr Beispiele

Ein zweispaltiges Layout:

<div style="display:flex; gap:16px;">
  <div style="flex:1; background:#eef; padding:12px;">Linke Spalte</div>
  <div style="flex:1; background:#efe; padding:12px;">Rechte Spalte</div>
</div>

Ein farbiger Abschnitt:

<div style="background:#ffd96c; padding:20px; border-radius:8px;">
  Highlight-Bereich
</div>

Typische Fehler

  • <div> für Überschriften nutzen statt <h1>–<h6>
  • Zu viele ineinander verschachtelte Boxen
  • Fehlende Struktur, weil alles nur <div> ist

Merke

  • Für Bedeutung semantische Elemente nutzen: <header>, <main>, <section>, <footer>
  • <div> ist ideal für Layout und Struktur
  • <div> wird oft mit CSS kombiniert

Mini-Übung

Baue eine kleine Karte mit Titel, Bild und Text:

<div style="width:240px; border:1px solid #ccc; border-radius:12px; padding:12px;">
  <img src="bild.jpg" style="width:100%; border-radius:8px;">
  <h3>Titel der Karte</h3>
  <p>Kurzer Beschreibungstext.</p>
</div>

Mini-Projekt

Erstelle ein einfaches Seitenlayout:

  • Header-Bereich oben
  • Zweispaltiger Hauptbereich
  • Footer unten
<div style="background:#223; color:#fff; padding:20px;">Header</div>

<div style="display:flex; gap:20px; padding:20px;">
  <div style="flex:2; background:#f0f0f0; padding:20px;">Inhalt</div>
  <div style="flex:1; background:#ddd; padding:20px;">Sidebar</div>
</div>

<div style="background:#223; color:#fff; padding:20px;">Footer</div>