<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-Inhalt. Es hat keine Auswirkungen auf den Inhalt oder das Layout, bis es auf irgendeine Weise mit CSS gestaltet wird (z. B. wenn direktes Styling darauf angewendet wird oder ein Layout-Modell wie Flexbox auf sein Elternelement angewendet wird).
Probieren Sie es aus
Als "reiner" Container repräsentiert das <div>
Element an sich nichts. Stattdessen wird es verwendet, um Inhalt zu gruppieren, sodass er einfach mit den Attributen class
oder id
gestylt werden kann, um einen Abschnitt eines Dokuments als in einer anderen Sprache verfasst zu markieren (mit dem Attribut lang
) und so weiter.
Attribute
Dieses Element enthält 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.
Verwendungshinweise
Barrierefreiheit
Das <div>
Element hat eine implizite Rolle von generic
, und nicht keine. Dies kann bestimmte ARIA-Kombinationsdeklarationen beeinflussen, die erwarten, dass ein unmittelbares Nachfahr-Element mit einer bestimmten Rolle ordnungsgemäß funktioniert.
Beispiele
Ein einfaches Beispiel
<div>
<p>
Any kind of content here. Such as <p>, <table>. You name it!
</p>
</div>
Ergebnis
Ein gestyltes Beispiel
Dieses Beispiel erzeugt eine schattierte Box, indem es ein Stil auf die <div>
mittels CSS anwendet. Beachten Sie die Verwendung des Attributs class
auf der <div>
, um den Stil namens "shadowbox"
auf das Element anzuwenden.
HTML
<div class="shadowbox">
<p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>
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, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt | Flow-Inhalt. Oder (in WHATWG HTML): Wenn das übergeordnete Element ein <dl> Element ist: eines oder mehrere <dt> Elemente, gefolgt von einem oder mehreren <dd> Elementen, optional durchmischt mit <script> und <template> Elementen. |
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Zulässige Eltern | Jedes Element, das Flow-Inhalt akzeptiert. Oder (in WHATWG HTML): <dl> -Element. |
Implizite ARIA-Rolle | generic |
Zulässige 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