<div>

Zuletzt aktualisiert am 30. Januar 2026

Das <div>-Element (kurz für “Division”) ist ein generischer Block-Container. Es hat keine eigene semantische Bedeutung und dient ausschließlich zum Gruppieren von Inhalten — typischerweise für CSS-Styling oder JavaScript-Manipulation. Wenn du anfängst, HTML zu schreiben, wirst du <div> überall begegnen. Stell es dir wie eine unsichtbare Schachtel vor, in die du andere Elemente packen kannst, um sie gemeinsam zu gestalten oder zu positionieren. Auf dieser Seite lernst du, wann ein <div> sinnvoll ist — und wann du lieber ein anderes Element verwenden solltest.

Grundlagen

Das <div> ist so etwas wie das Schweizer Taschenmesser unter den HTML-Elementen: vielseitig einsetzbar, aber nicht immer die beste Wahl. Du verwendest es, wenn du mehrere Elemente in einen gemeinsamen Container packen willst — zum Beispiel um ihnen ein bestimmtes Layout oder einen Hintergrund zu geben. Bevor du aber reflexartig zum <div> greifst, frag dich immer: Gibt es ein semantisches Element, das hier besser passt?

• <div> ist ein Block-Element: Es nimmt die volle verfügbare Breite ein und beginnt auf einer neuen Zeile
• Es hat keine semantische Bedeutung — Screenreader und Suchmaschinen können damit nichts anfangen. Verwende lieber <section>, <article>, <nav> oder <header>, wenn eines davon inhaltlich passt
• Ideal zum Gruppieren von Elementen für Layout-Zwecke (Flexbox, Grid) oder wenn du einen Wrapper für Styling brauchst

Syntax

<div>Dies ist ein div-Container.</div>

Beispiele

Gruppierung mit Styling

Stell dir vor, du möchtest einen Hinweis-Kasten auf deiner Seite bauen. Dafür brauchst du einen Container, der die Überschrift und den Text zusammenhält und ihnen einen gemeinsamen Hintergrund gibt. Genau dafür ist <div> gedacht:

<div style="background-color: #e0f2fe; padding: 16px; border-radius: 8px;">
  <h3>Hinweis</h3>
  <p>Dies ist ein gestylter Container mit div.</p>
</div>

Verschachtelte Divs für Layout

Ein sehr häufiges Muster: Du erstellst ein Flexbox-Layout mit mehreren Spalten. Das äußere <div> definiert das Layout, die inneren <div>-Elemente sind die einzelnen Spalten:

<div style="display: flex; gap: 16px;">
  <div style="flex: 1; background: #dbeafe; padding: 12px;">
    Spalte 1
  </div>
  <div style="flex: 1; background: #fef3c7; padding: 12px;">
    Spalte 2
  </div>
  <div style="flex: 1; background: #dcfce7; padding: 12px;">
    Spalte 3
  </div>
</div>

Barrierefreiheit

Ein <div> hat keine semantische Rolle — Screenreader ignorieren es komplett und lesen nur den Inhalt vor. Das ist genau richtig, wenn du ein <div> als Layout-Container verwendest. Problematisch wird es, wenn du ein <div> als interaktives Element einsetzt.

Ein <div onclick="..."> ist kein Button. Screenreader erkennen es nicht als klickbar, Tastaturnutzer können es nicht fokussieren, und es fehlt jede Rückmeldung über den Zustand. Verwende für klickbare Elemente immer <button> oder <a>. Falls du wirklich nicht anders kannst, musst du role="button", tabindex="0" und Tastatur-Handler für Enter und Space hinzufügen — aber das ist deutlich mehr Aufwand als einfach das richtige Element zu verwenden.

Wenn du einem <div> eine bestimmte Rolle geben musst, kannst du ARIA-Rollen verwenden, z.B. role="alert" für Fehlermeldungen oder role="status" für Statusanzeigen. Aber prüfe zuerst, ob es ein natives HTML-Element gibt, das diese Rolle bereits hat.

Häufige Fehler

• Div-Suppe: Wenn du merkst, dass dein HTML aus zehn verschachtelten <div>-Elementen besteht und du den Überblick verlierst, ist das ein Zeichen für sogenannte “Div-Suppe”. Das passiert häufig am Anfang. Schau dir deinen Code an und frag dich bei jedem <div>: Könnte ich hier <header>, <main>, <footer>, <section> oder <nav> verwenden? Diese semantischen Elemente funktionieren technisch genauso wie <div>, geben deiner Seite aber eine klare Struktur, die Suchmaschinen und Screenreader verstehen können.

• Div statt interaktives Element: Ein <div> mit einem Click-Handler ist kein Button. Screenreader erkennen es nicht als klickbar, und Tastaturnutzer können es nicht fokussieren. Wenn etwas angeklickt werden soll, verwende <button> (für Aktionen) oder <a> (für Navigation). Besser so: <button>Speichern</button> statt <div onclick="save()">Speichern</div>.

• Überflüssige Wrapper: Nicht jedes Element braucht ein umschließendes <div>. Wenn du nur ein einziges Kind-Element hast und das <div> keinen Styling-Zweck erfüllt, kannst du es einfach weglassen. Weniger HTML bedeutet saubereren Code und schnellere Seiten.

Browser-Kompatibilität

Das div-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Du kannst es bedenkenlos einsetzen.

Email-Kompatibilität

Das div-Element wird in den meisten Email-Clients unterstützt, allerdings mit Einschränkungen in Outlook.

Verwandte Elemente