Das <div>-Element

Das HTML-<div>-Element ist ein allgemeiner Container für andere HTML-Elemente.

Der Name kommt von „division“ und bedeutet auf Deutsch „Abschnitt“ oder „Bereich“.

Ein <div> hat keine eigene inhaltliche Bedeutung wie zum Beispiel <header>, <p> oder <button>. Du verwendest es hauptsächlich, um Inhalte zu gruppieren.

• Inhalte gruppieren
• Bereiche mit CSS gestalten
• Layouts erstellen
• Elemente mit JavaScript steuern

Inhalte gruppieren und stylen

Mit einem <div> kannst du mehrere HTML-Elemente zusammenfassen und gemeinsam gestalten.

Im folgenden Beispiel bekommt das <div> die Klasse card. Dadurch kannst du alle Elemente innerhalb dieses Bereichs mit CSS gestalten.

1<div class="card">
2  <h2>Produkt</h2>
3  <p>Preis: 99 €</p>
4  <button>Kaufen</button>
5</div>

1.card {
2  border: 1px solid gray;
3  padding: 20px;
4  width: 200px;
5  background-color: lightblue;
6}

Inhalte layouten

<div>-Elemente verwendest du auch häufig, um mehrere Bereiche einer Webseite anzuordnen.

Im nächsten Beispiel liegen mehrere Boxen in einem gemeinsamen Container. Mit CSS kannst du diese Boxen nebeneinander darstellen.

1<div class="container">
2  <div class="box">1</div>
3  <div class="box">2</div>
4  <div class="box">3</div>
5  <div class="box">4</div>
6</div>

1.container {
2  display: flex;
3  justify-content: space-around;
4}
5
6.box {
7  padding: 40px;
8  border: 1px solid black;
9}

Wichtig: Verwende ein <div> vor allem dann, wenn es kein passenderes HTML-Element gibt. Für besondere Bereiche gibt es oft semantische Elemente wie <header>, <main>, <section> oder <footer>.