`<div>`: Das Inhaltsteilungselement
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 Flussinhalt. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es in irgendeiner Weise mit CSS gestylt wird (z.B. wird Styling 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, die leicht mit den Attributen class
oder id
gestaltet werden können, um einen Abschnitt eines Dokuments als in einer anderen Sprache geschrieben zu markieren (unter Verwendung des lang
-Attributs) usw.
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 nutzen, um <div>
-Elemente auf der Seite auszurichten und zu positionieren.
Verwendungshinweise
Barrierefreiheit
Das <div>
-Element hat eine implizite Rolle von generic
und nicht none. Dies kann bestimmte ARIA-Kombinationsdeklarationen beeinflussen, die erwarten, dass ein direkter nachgeordneter 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 beschattete Box, indem ein Stil auf das <div>
mit CSS angewendet wird. Beachten Sie die Verwendung des class
-Attributs auf dem <div>
, um den Stil mit dem Namen "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 | Flussinhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt |
Flussinhalt. Oder (im 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.
|
Tag-Auslassung | Keine, sowohl der Anfangs- als auch der Endtag sind obligatorisch. |
Erlaubte Eltern |
Jedes Element, das
Flussinhalt
akzeptiert. Oder (im WHATWG HTML): <dl> -Element.
|
Implizite ARIA-Rolle |
generic
|
Erlaubte ARIA-Rollen | Jede |
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