<div>: Das Content-Division-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <div> HTML-Element ist der generische Container für Flow-Inhalte. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es auf irgendeine Weise mit CSS gestylt wird (z.B. Styling wird direkt darauf angewendet, oder ein Layoutmodell wie Flexbox wird auf das Elternelement angewendet).

Probieren Sie es aus

Als "reiner" Container repräsentiert das <div>-Element von sich aus nichts. Stattdessen wird es verwendet, um Inhalte zu gruppieren, sodass sie leicht mit den Attributen class oder id gestylt werden können, einen Abschnitt eines Dokuments als in einer anderen Sprache geschrieben zu kennzeichnen (mit dem lang-Attribut), und so weiter.

Attribute

Dieses Element umfasst die globalen Attribute.

Hinweis: Das align-Attribut ist veraltet; verwenden Sie es nicht mehr. Stattdessen sollten Sie CSS-Eigenschaften oder Techniken wie CSS Grid oder CSS Flexbox verwenden, um <div>-Elemente auf der Seite auszurichten und zu positionieren.

Nutzungshinweise

  • Das <div>-Element sollte nur verwendet werden, wenn kein anderes semantisches Element (wie <article> oder <nav>) angemessen ist.

Barrierefreiheit

Das <div>-Element hat eine implizite Rolle von generic, und nicht keine. Dies kann bestimmte ARIA-Kombinationsdeklarationen beeinflussen, die erwarten, dass ein direkter Nachfahr mit einer bestimmten Rolle ordnungsgemäß funktioniert.

Beispiele

Ein einfaches Beispiel

html
<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

Ergebnis

Ein gestyltes Beispiel

Dieses Beispiel erzeugt eine schattierte Box, indem ein Style auf das <div>-Element mit CSS angewendet wird. Beachten Sie die Verwendung des class-Attributs auf dem <div>, um den Style namens "shadowbox" auf das Element anzuwenden.

HTML

html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

CSS

css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flow-Inhalt, fühlbarer Inhalt.
Erlaubter Inhalt Flow-Inhalt.
Oder (in WHATWG HTML): Wenn das Elternteil ein <dl>-Element ist: ein oder mehrere <dt>-Elemente gefolgt von einem oder mehreren <dd>-Elementen, eventuell vermischt mit <script> und <template>-Elementen.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Elternteile Jedes Element, das Flow-Inhalt akzeptiert.
Oder (in WHATWG HTML): <dl>-Element.
Implizite ARIA-Rolle generic
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLDivElement`](/de/docs/Web/API/HTMLDivElement)

Spezifikationen

Specification
HTML Standard
# the-div-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch