<div>

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

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.

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

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

  Outlook nutzt die Word-Rendering-Engine, die div-Elemente teilweise anders interpretiert. Für zuverlässige Layouts in Outlook besser table-basierte Strukturen verwenden.

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett