Was das div-Tag macht
<div> (kurz für division, also Abschnitt) ist ein allgemeiner Container. Es fasst Elemente zusammen, damit du sie als eine Einheit stylen, positionieren oder per Skript ansprechen kannst. Für sich allein sieht es nach nichts aus: kein Außenabstand, kein Rahmen, keine besondere Schrift. Es ist ein Block-Element, beginnt also in einer neuen Zeile und erstreckt sich über die verfügbare Breite.
Entferne die Zeile mit border im Style, und die divs werden unsichtbar: So sieht ein div standardmäßig aus. Alles, was es optisch tut, kommt aus dem CSS.
div class und id
Ein div bekommt meistens eine class, also den Namen, auf den dein CSS zielt. Divs mit derselben Klasse teilen sich den Style:
.card stylt beide Kästen, .card.highlight gibt dem div, das beide Klassen hat, einen blauen Rahmen. Nimm id, wenn du auf ein bestimmtes div zeigen musst, zum Beispiel als Linkziel (href="#pro"). Die Seite zu Attributen vergleicht class und id im Detail.
Divs nebeneinander
Weil divs Blöcke sind, stapeln sie sich untereinander. Um sie in eine Reihe zu setzen, machst du ihr Elternelement zu einem Flex-Container:
display: flex an .row reiht die Kinder auf, gap sorgt für Abstand, und die flex-Werte verteilen die Breite (hier 1 : 2 : 1). Dieses Muster aus Eltern- und Kindelementen ist die häufigste Verwendung von divs auf echten Websites. Wie du ein div zentrierst, erfährst du unter div zentrieren.
Divs verschachteln
Divs können andere divs in beliebiger Tiefe enthalten. Jede Ebene ist ein Kasten in einem Kasten, was du siehst, wenn du jedem div einen Rahmen und etwas Innenabstand gibst:
Halte die Verschachtelung so flach, wie das Layout es zulässt. Jeder zusätzliche Wrapper ist ein weiterer Kasten, über den du nachdenken musst, wenn ein Abstand oder eine Breite nicht das tut, was du erwartest.
div oder ein semantisches Tag?
Ein div sagt nichts über seinen Inhalt aus. HTML hat Tags, die genauso gruppieren und zusätzlich sagen, was die Gruppe ist:
| Statt | Nimm | Für |
|---|---|---|
<div class="header"> | <header> | Einleitung oder obere Leiste einer Seite oder eines Abschnitts |
<div class="nav"> | <nav> | Einen Block mit Navigationslinks |
<div class="main"> | <main> | Den Hauptinhalt, einmal pro Seite |
<div class="post"> | <article> | Einen eigenständigen Eintrag: Beitrag, Kommentar, Produktkarte |
<div class="footer"> | <footer> | Fußbereich einer Seite oder eines Abschnitts |
Diese Tags sehen genau wie ein div aus, bis du sie stylst, aber Screenreader kündigen sie an und lassen Nutzer zwischen ihnen springen, und Suchmaschinen lesen die Struktur. Nimm ein div für Kästen, die nur für Layout oder Styling existieren, wie den .row-Wrapper oben. Die Seite zu semantischem HTML zeigt alle diese Tags.
Ein div ist kein Button
Ein div mit Klick-Handler sieht für Mausnutzer anklickbar aus, aber wer die Tastatur benutzt, erreicht es nicht mit Tab und kann es nicht mit Enter auslösen, und ein Screenreader kündigt es nicht als Button an:
Nimm <button> für Aktionen und <a href> für Navigation. Beide sind fokussierbar und funktionieren ohne Zusatzaufwand mit der Tastatur.
Häufige Fehler
- Ein div in einem
<p>. Der Absatz schließt sich vor dem div. Mach das div zum äußeren Element oder nimm<span>im Absatz. - Div-Suppe. Eine Seite nur aus divs hat für Screenreader keine Struktur. Tausch divs gegen
<header>,<nav>,<main>und<footer>, wo sie passen. - Anklickbare divs. Nimm stattdessen einen
<button>oder einen Link. - Erwarten, dass ein div so breit ist wie sein Text. Ein div nimmt die volle Breite ein. Nimm
display: inline-block,width: fit-contentoder ein<span>, wenn es schrumpfen soll. - Eine id an mehreren divs. Für alles, was sich wiederholt, nimm eine Klasse.
Häufig gestellte Fragen
Was ist ein div in HTML?
<div> ist ein allgemeiner Container. Es gruppiert andere Elemente, damit du sie gemeinsam stylen oder positionieren kannst, und hat keine eigene Bedeutung: Browser zeigen es als Block an, der in einer neuen Zeile beginnt und die volle verfügbare Breite einnimmt.
Was bedeutet div class?
<div class="card"> ist ein div mit einem class-Attribut. Die Klasse ist ein Name, über den CSS es stylt (.card { ... }) und JavaScript es findet. Viele divs können eine Klasse teilen, und ein div kann mehrere haben: class="card featured".
Wie setze ich zwei divs nebeneinander?
Pack sie in ein Eltern-div und gib dem Elternelement display: flex. Die Kinder stehen dann in einer Reihe. Mit gap bekommst du Abstand dazwischen, und flex: 1 an den Kindern teilt die Breite gleichmäßig auf.
Soll ich div oder section verwenden?
Nimm <section>, <header>, <nav>, <main>, <article> oder <footer>, wenn der Inhalt diese Rolle hat, denn Screenreader und Suchmaschinen verstehen sie. Nimm <div>, wenn du nur einen Kasten für Styling oder Layout brauchst.
Kann ich ein div in ein p-Tag setzen?
Nein. Ein Absatz darf nur Inline-Inhalt enthalten. Der Browser schließt das <p>, sobald er <div> sieht, und das macht deine Styles kaputt. Nimm ein div als äußeres Element oder ein <span> im Absatz.
