TAG 2 · HTML

HTML: <div> – der einfache Container

Ein <div> ist ein allgemeiner Container. Er kann mehrere HTML-Elemente zusammenfassen und wird häufig verwendet, um Bereiche einer Website zu strukturieren und anschließend mit CSS zu gestalten.

1) Was ist ein <div>?

Das Wort div steht für „division“, also einen Bereich oder Abschnitt.

Ein <div> besitzt selbst keine besondere inhaltliche Bedeutung. Es dient hauptsächlich dazu, andere Elemente zu gruppieren.

Dadurch kann dieser Bereich anschließend beispielsweise mit CSS gestaltet oder mit einem Layout-System wie Flexbox angeordnet werden.

2) Wann nutze ich ein <div>?

  • Zum Gruppieren mehrerer HTML-Elemente.
  • Für visuelle Bereiche wie Boxen, Karten oder Spalten.
  • Zum Erstellen von Layouts mit Flexbox oder CSS Grid.
  • Wenn kein passendes semantisches HTML-Element vorhanden ist.

3) Einfaches Beispiel

Ein <div> kann beispielsweise einen Titel und einen Text zusammenfassen: 

<div>
  <h2>Hallo Sommercamp!</h2>
  <p>Ich bin ein einfacher Container.</p>
</div>

Hallo Sommercamp!

Ich bin ein einfacher Container.

4) <div> mit CSS gestalten

Besonders nützlich wird ein <div>, wenn du ihm mit CSS ein Aussehen gibst. 

<div style="padding:16px;
            border:1px solid #1e2a48;
            border-radius:12px;">

  <h2>Hallo Sommercamp!</h2>
  <p>Dieser Bereich wurde mit CSS gestaltet.</p>

</div>

Hallo Sommercamp!

Dieser Bereich wurde mit CSS gestaltet.

5) Zwei Spalten mit <div>

Mit mehreren <div>-Elementen und Flexbox kannst du beispielsweise zwei Spalten nebeneinander erstellen. 

<div style="display:flex; gap:16px;">

  <div style="flex:1;">
    Linke Spalte
  </div>

  <div style="flex:1;">
    Rechte Spalte
  </div>

</div>
Linke Spalte
Hier steht weiterer Inhalt.
Rechte Spalte
Hier steht ebenfalls Inhalt.

6) Einen Bereich hervorheben

Ein <div> kann auch verwendet werden, um einen bestimmten Bereich optisch hervorzuheben. 

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

  Highlight-Bereich

</div>
Highlight-Bereich
Dieser Bereich wurde mit CSS hervorgehoben.

7) Nicht alles mit <div> machen

Ein häufiger Fehler ist, für alle Bereiche einer Website ausschließlich <div> zu verwenden.

Wenn ein passendes semantisches HTML-Element existiert, solltest du dieses verwenden.

  • <header> → Kopfbereich
  • <nav> → Navigation
  • <main> → Hauptinhalt
  • <section> → Abschnitt
  • <footer> → Fußbereich

8) Typische Fehler

  • <div> als Überschrift verwenden, anstatt <h1> bis <h6> zu verwenden.
  • Zu viele <div>-Elemente ineinander verschachteln.
  • Alles als <div> schreiben, obwohl ein passendes semantisches Element vorhanden ist.
  • CSS direkt in jedes einzelne Element schreiben, obwohl eine CSS-Klasse übersichtlicher wäre.

Merke

  • <div> ist ein allgemeiner Container.
  • Mit <div> kannst du Inhalte gruppieren und strukturieren.
  • <div> wird sehr häufig zusammen mit CSS verwendet.
  • Für Layouts eignen sich beispielsweise Flexbox oder Grid.
  • Für inhaltliche Bedeutung solltest du semantische HTML-Elemente verwenden.

9) Mini-Übung

Erstelle eine kleine Karte mit einem Titel, einem Bild und einem Beschreibungstext. 

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

10) Mini-Projekt

Erstelle eine einfache Website-Struktur mit drei Bereichen:

  • Header – oben auf der Seite
  • Hauptbereich – mit Inhalt und Sidebar
  • Footer – am unteren Ende 
<div class="header">
  Header
</div>

<div class="content">

  <div class="main">
    Inhalt
  </div>

  <div class="sidebar">
    Sidebar
  </div>

</div>

<div class="footer">
  Footer
</div>
Aufgabe:

Versuche anschließend, die einzelnen Bereiche mit CSS zu gestalten und mit Flexbox nebeneinander anzuordnen.