<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 ⁨Juli 2015⁩.

Das <div> HTML Element ist der generische Container für Flussinhalt. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es in irgendeiner Weise mithilfe von CSS gestaltet wird (z.B. wenn direktes Styling darauf angewendet wird oder ein Layout-Modell wie Flexbox auf das Elternelement angewendet wird).

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 repräsentiert das <div> Element nichts Eigenes. Stattdessen wird es verwendet, um Inhalte zu gruppieren, sodass sie leicht unter Verwendung der class oder id Attribute gestylt werden können, um einen Abschnitt eines Dokuments als in einer anderen Sprache geschrieben zu markieren (mittels des lang Attributs), und so weiter.

Attribute

Dieses Element schließt die globalen Attribute ein.

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.

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 keine. Dies kann bestimmte ARIA-Kombinationserklärungen beeinflussen, die erwarten, dass ein direkter Nachfahre mit einer bestimmten Rolle korrekt 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 erstellt eine beschattete Box, indem ein Stil mithilfe von CSS auf das <div> angewendet wird. Beachten Sie die Verwendung des class Attributs 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	Flussinhalt, fühlbarer Inhalt.
Erlaubter Inhalt	Flussinhalt. Oder (in WHATWG HTML): Wenn das Elternelement ein `<dl>` Element ist: eines oder mehrere `<dt>` Elemente gefolgt von einem oder mehreren `<dd>` Elementen, optional vermischt mit `<script>` und `<template>` Elementen.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Flussinhalt 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 # the-div-element

Browser-Kompatibilität

Siehe auch

Semantische Abschnittselemente: <section>, <article>, <nav>, <header>, <footer>
<span> Element für das Styling von Formatinhalten

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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