Das div-Element: Der neutrale Container
Das <div> (von "division", Abschnitt) ist ein Block-Container ohne jede eigene Bedeutung. Es sagt nichts über seinen Inhalt aus, es zeichnet nichts, es tut von sich aus gar nichts. Genau darin liegt sein Zweck: Es gruppiert Dinge, damit man sie gemeinsam mit CSS gestalten oder mit JavaScript ansprechen kann.
Syntax und Beispiel
HTML-Code
<div class="hinweisbox">
<p>Wichtig: Vorher speichern!</p>
</div>Erst zusammen mit einer Klasse und passendem CSS wird daraus etwas Sichtbares, etwa die gelben Hinweiskästen hier im Wiki. Ohne Styling ist ein div einfach nur ein unsichtbarer Kasten über die volle Breite.
Wann div, wann etwas Besseres?
Die Frage ist immer: Gibt es ein Element das die Bedeutung schon mitbringt? Eine Navigation ist eine nav, ein Fußbereich ein footer, ein eigenständiger Artikel ein article. Die Kandidaten stehen im Kapitel Semantisches HTML. Erst wenn keins davon passt, wenn du also wirklich nur einen bedeutungslosen Kasten zum Gruppieren brauchst, ist das div die richtige Wahl. Und das kommt oft genug vor: Layout-Raster, Wrapper für Flexbox und Grid, dekorative Rahmen. Auch diese Retro-Fenster hier bestehen aus divs, und das ist völlig in Ordnug so.
Div-Suppe erkennen
So bitte nicht
<div class="seite">
<div class="oben">
<div class="menue">
<div class="menuepunkt">
<div class="link-wrapper">...</div>
</div>
</div>
</div>
</div>Wenn sich divs fünffach verschachteln und die Klassennamen die Arbeit der Elemente übernehmen, ist das ein Zeichen zum Aufräumen. Jede Ebene sollte einen nachvollziehbaren Grund haben. Faustregel aus der Praxis: erst die Struktur mit semantischen Elementen bauen, dann divs ergänzen wo das Styling sie wirklich braucht, nicht umgekehrt.
Kurzreferenz
- Block-Element, Standardverhalten siehe Block und Inline.
- Keine eigenen Attribute, nur die globalen (class und id sind hier die Stars).
- Inline-Gegenstück: span.
Verwandt: span · Semantisches HTML · Klassen und IDs