HTML Element - `div`

Das div-Element ist ein allgemeiner Container ohne eigene Bedeutung. Es gruppiert Inhalte innerhalb einer Webseite.

Beispiel

<div>
<h1>HTML-Element: div</h1>
<p>Ein Absatz p</p>
</div>

Definition und Verwendung

Das div-Tag definiert einen Abschnitt in einem HTML-Dokument.

Das div-Tag dient als Container für HTML-Elemente, die anschließend mit CSS formatiert oder mit JavaScript manipuliert werden.

Das div-Tag lässt sich einfach über das Klassen- oder ID-Attribut formatieren.

Beliebige Inhalte können innerhalb des div-Tags platziert werden.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Attribute-Tabelle
Attribut	Wert	Beschreibung
class	Name	Das Attribut `class` gibt einen oder mehrere Klassennamen für ein Element an.
id	Name	Das id-Attribut legt eine eindeutige ID für ein HTML-Element fest.

Unterstützung von Global- und Event-Attribute

Das div-Tag unterstützt auch Global- und Event-Attribute.

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

div {
display: block;
}

Beispiel mit `class`

<!DOCTYPE html>
<html>
<head>
<style>
.dasDiv {
border: solid 2px #000000;
background-color: #feddbf;
padding: 8px 16px;
}
</style>
</head>

<body>
<div class="dasDiv">
<h1>class: dasDiv</h1>
<p>Ein Absatz p</p>
</div>
</body>
</html>

Beispiel mit `id`

<!DOCTYPE html>
<html>
<head>
<style>

#meinDiv1 {
border: solid 2px #ff0000;
background-color: #d5d9ff;
padding: 8px 16px;
}

</style>
</head>

<body>
<div id="meinDiv">
<h1>id: meinDiv1</h1>
<p>Ein Absatz p</p>
</div>
</body>
</html>

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des `div` durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element	Firefox	Internet Explorer / Edge	Safari	Chrome	Opera
`<div>`