<div> HTML-Inhaltsaufteilungselement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

In diesem Artikel

Probieren Sie es aus

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge red;
  background-color: yellow;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

Als "reiner" Container stellt das <div>-Element an sich nichts dar. Stattdessen wird es verwendet, um Inhalte zu gruppieren, sodass sie durch die Verwendung der Attribute class oder id leicht gestylt werden können, einen Abschnitt eines Dokuments als in einer anderen Sprache geschrieben zu kennzeichnen (mit dem Attribut lang) usw.

Attribute

Dieses Element enthält die globalen Attribute.

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

Verwendungshinweise

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

Barrierefreiheit

Das <div>-Element hat eine implizite Rolle von generic, und nicht none. Dies kann bestimmte ARIA-Kombinationserklärungen beeinträchtigen, die erwarten, dass ein direktes Nachfahrelement mit einer bestimmten Rolle ordnungsgemäß funktioniert.

Beispiele

Ein grundlegendes 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 Schattenbox, indem ein Stil auf das <div> mithilfe von CSS angewendet wird. Beachten Sie die Verwendung des Attributs class auf dem <div>, um den Stil 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 #333333;
  box-shadow: 8px 8px 5px #444444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tags-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flussinhalt, fühlbarer Inhalt.

Flussinhalt.
Oder (in WHATWG HTML): Wenn das Elternelement ein <dl>-Element ist: ein oder mehrere <dt>-Elemente, gefolgt von einem oder mehreren <dd>-Elementen, optional vermischt mit <script> und <template>-Elementen.

Keine, sowohl das öffnende als auch das schließende Tag sind obligatorisch.

Jedes Element, das Flussinhalt akzeptiert.
Oder (in WHATWG HTML): <dl>-Element.

generic

Beliebig

[`HTMLDivElement`](/de/docs/Web/API/HTMLDivElement)

Semantische Bereichselemente: <section>, <article>, <nav>, <header>, <footer>
<span>-Element zum Styling von Phraseninhalt

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<div> HTML-Inhaltsaufteilungselement

In diesem Artikel

Probieren Sie es aus

Attribute

Verwendungshinweise

Barrierefreiheit

Beispiele

Ein grundlegendes Beispiel

Ergebnis

Ein gestyltes Beispiel

HTML

CSS

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN