<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).
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
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
<div>
<p>
Any kind of content here. Such as <p>, <table>. 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
<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 #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: ein oder mehrere
<dt>-Elemente, gefolgt von einem oder mehreren
<dd>-Elementen, optional vermischt mit
<script> und
<template>-Elementen.
|
| Tags-Auslassung | Keine, sowohl das öffnende als auch das schließende 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
| Spezifikation |
|---|
| HTML # the-div-element |