HTML <div> Tag
Erfahren Sie, wie der <div>-Tag HTML-Elemente gruppiert und mit CSS gestaltet wird. Attribute wie class, id und style mit Beispielen.
Der <div>-Tag ist ein Container, der eine Division oder einen Abschnitt definiert. Es handelt sich um ein Block-Level-Element, das den Inhalt selbst nicht beeinflusst, sondern hauptsächlich dazu verwendet wird, HTML-Elemente zu gruppieren, damit sie mit CSS gestaltet oder per Skript manipuliert werden können.
Da <div> ein Block-Level-Element ist, beginnt jedes davon in einer neuen Zeile und dehnt sich auf die verfügbare Breite aus. Es trägt keine eigene semantische Bedeutung — es ist eine generische Box. Verwenden Sie <div>, um block-level Inhalte zu gruppieren; um inline-Inhalte zu gruppieren oder zu gestalten (einige Wörter innerhalb eines Satzes), greifen Sie stattdessen zum Inline-Gegenstück, dem <span>-Tag.
Positionierung von Blöcken, die durch den <div>-Tag definiert werden
Da <div> ein Block-Level-Element ist, wird vor und nach ihm ein Zeilenumbruch eingefügt.
Es ist möglich, jedes HTML-Element innerhalb eines <div>-Tags zu platzieren, einschließlich eines weiteren <div>.
Block-Level-Elemente wie <div> können nicht innerhalb von <p>-Tags verschachtelt werden, da der Absatz an der Stelle unterbrochen wird, an der der <div>-Tag platziert ist.
Um Stile innerhalb eines Absatzes anzuwenden, verwenden Sie den <span>-Tag, der für Inline-Elemente genutzt wird.
Syntax
Der <div>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<div>) und schließenden (</div>) Tag geschrieben.
Beispiel des HTML-<div>-Tags:
Beispiel des HTML-<div>-Tags
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> vs. semantische Elemente
Ein <div> ist das richtige Werkzeug, wenn Sie lediglich eine generische Box benötigen, an der Stile oder Skripte angehängt werden sollen. Repräsentiert die Box jedoch einen bedeutungsvollen Bereich der Seite — Navigation, eine Kopfzeile, ein Artikel — bevorzugen Sie das passende HTML5-semantische Element. Semantische Tags beschreiben, was der Inhalt ist, was Suchmaschinen, Screenreadern und anderen Entwicklern hilft, Ihr Markup zu verstehen.
Vergleichen Sie dieselbe Struktur auf zwei verschiedene Weisen geschrieben:
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Beide werden standardmäßig identisch dargestellt, aber die zweite Version ist deutlich barrierefreier und wartungsfreundlicher.
Vorsicht vor "Div-Suppe". Alles in verschachtelten <div>-Elementen zu verpacken — <div class="nav">, <div class="header"> und so weiter — erzeugt Markup, das schwer zu lesen ist und unterstützenden Technologien nichts bietet. Fragen Sie sich, bevor Sie ein <div> hinzufügen, ob <nav>, <header>, <main>, <article>, <section> oder <footer> besser passt.
<div> vs. <span>
Die Tags <div> und <span> sind beide generische, bedeutungslose Container — der Unterschied liegt in der Box, die sie erzeugen:
<div>ist block-level. Es beginnt in einer neuen Zeile, füllt die verfügbare Breite aus und wird verwendet, um größere Inhaltsbereiche zu gruppieren (Absätze, Listen, andere Divs).<span>ist inline. Es fließt innerhalb einer Textzeile und wird verwendet, um einen kleinen Inhaltsteil wie ein Wort oder eine Phrase zu gestalten oder zu adressieren.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>Als Faustregel gilt: Greifen Sie zu <div>, um block-level Inhalte zu gruppieren, und zu <span>, um inline-Inhalte einzuschließen.
Wenn wir Layouts erstellen, arbeiten wir mit mehreren Blöcken, die durch den <div>-Tag definiert werden. Die Positionierung dieser Blöcke ist das Herzstück des Layouts: Elemente in korrekten relativen Positionen über alle Bildschirmgrößen hinweg zu platzieren ist eine der wichtigsten Aufgaben.
Je nach Inhalt und Zielen der Seite können wir verschiedene Techniken (oder deren Kombinationen) einsetzen, um den Platz jedes Blocks zu bestimmen. Für moderne Layouts sind die zwei Werkzeuge, nach denen Sie zuerst greifen sollten, CSS Grid (für zweidimensionale Zeilen-und-Spalten-Layouts) und Flexbox (für eindimensionale Zeilen oder Spalten). Die älteren Techniken unten — Floats, negative Margins und absolute Positionierung — funktionieren zwar noch, sind aber heute selten die beste Wahl.
CSS Grid
CSS Grid ist der moderne Standardweg, um zweidimensionale Layouts zu erstellen — also Layouts, die <div>-Blöcke gleichzeitig in Zeilen und Spalten anordnen. Sie definieren ein Grid auf dem Container mit display: grid und beschreiben dessen Tracks; die untergeordneten Blöcke fließen dann in die Zellen.
Beispiel des HTML-<div>-Tags mit CSS Grid:
Ein Beispiel des HTML-<div>-Tags mit CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Dieses einzelne grid-template-columns: 1fr 1fr 1fr erstellt drei gleiche Spalten, und die sechs <div>-Blöcke umbrechen automatisch in zwei Zeilen.
Flexbox
Wenn Sie Elemente nur entlang einer einzigen Achse — einer Zeile oder einer Spalte — anordnen möchten, ist Flexbox das richtige Werkzeug. In modernen Websites werden float-basierte Layouts durch Flexbox und Grid ersetzt. Die Hauptidee hinter Flexbox ist, dass Sie damit die Ausrichtung, Richtung, Reihenfolge und Größe der Elemente innerhalb des Containers steuern können.
Beispiel einer Flexbox mit dem HTML-<div>-Tag:
Ein Beispiel des HTML-<div>-Tags mit Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>CSS Float-Eigenschaft
Die CSS-Eigenschaft float, oder "Floats", ermöglicht es Elementen, nebeneinander oder getrennt voneinander zu erscheinen, wodurch wir verschiedene Layout-Arten erstellen können, darunter mehrspaltige Seiten, Seitenleisten, Grids usw.
Beispiel des HTML-<div>-Tags mit der CSS Float-Eigenschaft:
Beispiel des HTML-<div>-Tags mit der CSS Float-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Ergebnis
Negative Margins (veraltete Technik)
Negative Margins können sowohl auf statische als auch auf gefloatete Elemente angewendet werden, um Blöcke näher zusammenzuziehen oder sie überlappen zu lassen.
Beispiel für negative Margins:
Beispiel des HTML-<div>-Tags mit negativen Margins
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Relative+absolute Positionierung
Wenn Sie ein div relativ zu einem bestimmten Element positionieren möchten, können Sie eine Kombination aus position: relative und position: absolute verwenden.
Beispiel der relativen+absoluten Positionierung des HTML-<div>-Tags:
Ein Beispiel des HTML-<div>-Tags mit der CSS position-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative hat keinen Einfluss auf die Positionierung von Elementen im normalen Fluss, sofern keine Versatzwerte hinzugefügt werden.
Attribute
Der <div>-Tag hat keine eigenen Attribute. In der Praxis stützt er sich auf die globalen Attribute — am häufigsten id, class, style, data-* und aria-* — um gestaltet, geskriptet oder barrierefrei gemacht zu werden. Er unterstützt außerdem die Event-Attribute.
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right center justify | Veraltet. Wurde verwendet, um den Inhalt innerhalb eines <div>-Tags auszurichten. Es wird in HTML5 nicht mehr unterstützt — verwenden Sie stattdessen die CSS text-align-Eigenschaft. |