<div>: Das Inhaltsdivisions-Element

Das <div> HTML Element ist der generische Container für Fließinhalt. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es in irgendeiner Weise mit CSS gestaltet wird (z. B. wird ein Stil direkt darauf angewendet, oder ein Layoutmodell wie Flexbox wird auf sein übergeordnetes Element angewendet).

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 von sich aus nichts. Stattdessen wird es verwendet, um Inhalt zu gruppieren, damit es leicht mit den class oder id Attributen gestaltet werden kann, Abschnitte eines Dokuments als in einer anderen Sprache geschrieben zu kennzeichnen (mithilfe des lang Attributs), und so weiter.

Attribute

Dieses Element umfasst die globalen Attribute.

Verwendungshinweise

• Das <div>-Element sollte nur dann 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 "none". Dies kann bestimmte ARIA-Kombinationserklärungen beeinflussen, die erwarten, dass ein direkter Nachfahre ein Element mit einer bestimmten Rolle ist, um ordnungsgemäß zu funktionieren.

Beispiele

Ein einfaches Beispiel

<div>
 <p>
 Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
 </p>
</div>

Ergebnis

Ein stilisiertes Beispiel

Dieses Beispiel erstellt eine schattierte 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 #333333;
 box-shadow: 8px 8px 5px #444444;
 padding: 8px 12px;
 background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Semantische Segmentierungselemente: <section>, <article>, <nav>, <header>, <footer>
• <span> Element für die Gestaltung von Phraseninhalten