<div>-HTML-Inhaltsdivisionselement
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 HTML-Element <div> ist der generische Container für Flow-Inhalte. Es hat keine Auswirkungen auf den Inhalt oder das Layout, bis es mithilfe von CSS auf irgendeine Weise gestaltet wird (z. B. indem Styling direkt darauf angewendet wird oder indem ein Layoutmodell wie Flexbox auf sein übergeordnetes Element 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;
}
Attribute
Dieses Element enthält die globalen Attribute.
Hinweis:
Das Attribut align ist veraltet; verwenden Sie es nicht mehr. Verwenden Sie stattdessen CSS-Eigenschaften oder Techniken wie CSS Grid oder CSS Flexbox, um <div>-Elemente auf der Seite auszurichten und zu positionieren.
Hinweise zur Verwendung
Als „reiner“ Container stellt das Element <div> von sich aus nichts dar. Es wird stattdessen verwendet, um Inhalte zu gruppieren, damit sie mithilfe der Attribute class oder id einfach gestaltet werden können, um einen Abschnitt eines Dokuments als in einer anderen Sprache geschrieben zu kennzeichnen (mithilfe des Attributs lang) und so weiter.
Das Element <div> sollte nur verwendet werden, wenn kein anderes semantisches Element (wie <article> oder <nav>) geeignet ist.
Barrierefreiheit
Das Element <div> hat eine implizite Rolle von generic und nicht none. Dies kann bestimmte ARIA-Kombinationsdeklarationen beeinflussen, die erwarten, dass ein direktes Nachfahr-Element mit einer bestimmten Rolle vorhanden ist, damit sie ordnungsgemäß funktionieren.
Beispiele
Ein grundlegendes Beispiel
<div>
<p>
Any kind of content here. Such as <p>, <table>. You name it!
</p>
</div>
Ergebnis
Ein gestaltetes Beispiel
Dieses Beispiel erstellt ein schattiertes Feld, indem mithilfe von CSS ein Stil auf das <div> angewendet wird. Beachten Sie die Verwendung des Attributs class 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 #333333;
box-shadow: 8px 8px 5px #444444;
padding: 8px 12px;
background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Flow-Inhalt, wahrnehmbarer Inhalt. |
|---|---|
| Erlaubter Inhalt |
Flow-Inhalt. 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.
|
| Weglassen von Tags | Keines, sowohl das Start- als auch das End-Tag sind erforderlich. |
| Erlaubte Elternelemente |
Jedes Element, das
Flow-Inhalt akzeptiert. Oder (in WHATWG-HTML): ein <dl>-Element.
|
| Implizite ARIA-Rolle |
generic
|
| Erlaubte ARIA-Rollen | Beliebige |
| DOM-Schnittstelle | [`HTMLDivElement`](/de/docs/Web/API/HTMLDivElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-div-element |