Stellen Sie sich vor, dass eine Website in drei große Teile aufgeteilt ist: Es gibt den Header, den Footer und dazwischen den Textkörper. Aber wenn Sie sich eine Website ansehen, können Sie sehen, dass auch der Textkörper in verschiedene Abschnitte unterteilt ist. Es gibt zum Beispiel einen Abschnitt für Produkte und Dienstleistungen, Erfahrungsberichte, Teammitglieder, Kontaktinformationen und so weiter.
Und jeder dieser Abschnitte sieht wahrscheinlich ein wenig anders aus. Möglicherweise unterscheiden sich Farben und Schriftarten. Vielleicht hat ein Abschnitt einen Parallaxenhintergrund oder einen Videohintergrund. Oder ein Abschnitt besteht aus mehreren Zeilen und Spalten und so weiter.
Diese Variationen des Stylings werden durch das „div“-Element für die Inhaltsaufteilung in HTML ermöglicht. Mit diesem Element können Sie Ihre Website in Abschnitte unterteilen, so dass Sie diese wiederum mit eindeutigen CSS-Eigenschaften versehen können.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
In diesem Post sehen wir uns an, was genau dieses Element macht und warum Sie es auf Ihrer eigenen Website verwenden sollten. Aber zuerst haben wir in diesem Video (auf Englisch) zusammengefasst, was „div“-Tags können.
Was bedeutet <div> in HTML?
In HTML ist der <div>-Tag ein generischer Container auf Blockebene für andere Elemente.
Schauen wir uns einige der Begriffe in dieser Definition genauer an.
- Ein „div“-Tag ist ein „generischer“ Container, weil er den Inhalt, den er enthält, nicht beschreibt. Andere Elemente wie <nav>, <header>, <footer> und <form> beschreiben den Inhalt, den sie enthalten, eindeutig und werden daher als semantische HTML-Elemente bezeichnet. Nach Möglichkeit sollten Sie immer ein semantisches Element anstelle eines „div“-Tags verwenden, da Ihr Code dadurch leichter zugänglich und einfacher zu pflegen ist.
- Ein „div“-Tag ist ein Container auf Blockebene. Ganz im Gegensatz zum Beispiel zu einem „span“-Element, das ein Inline-Container ist, also auf „Inline-Ebene“. Zwischen einem Blockebene- und einem Inline-Container gibt es mehrere wesentliche Unterschiede.
Ein „div“-Tag beginnt beispielsweise immer in einer eigenen Zeile, während ein „span“-Tag in derselben Zeile bleibt (inline eben, daher der Name). Ein „div“-Tag nimmt außerdem die gesamte Breite der Seite ein, ein „span“-Tag dagegen nicht. Das heißt, wenn Sie mehrere „div“-Tags in einer Reihe haben, werden sie im Frontend übereinander gestapelt angezeigt. „span“-Tags können dagegen auch nebeneinander stehen. Der letzte wichtige Unterschied besteht darin, dass Sie die Höhe und Breite eines „div“-Tags definieren können, was bei einem „span“ nicht möglich ist. - Die Elemente, die in einem „div“-Tag enthalten sein können, werden als „konkreter Inhalt“ oder „fließender Inhalt“ bezeichnet. Konkrete Inhalte sind im Grunde genommen alle HTML-Elemente, die Text oder eingebetteten Inhalt enthalten. Fließende Inhalte sind alle Elemente, die im Körper von HTML-Dokumenten verwendet werden. Anker, Blockzitate, Audio-, Bild-, Absatz- und Überschriftselemente werden alle als konkrete oder fließende Inhalte betrachtet und können innerhalb eines „div“-Tags platziert werden.
Wo muss ein <div>-Tag in HTML hin?
„div“-Tags gehören in den Textkörper einer HTML-Datei. Dieser wird durch die <body></body>-Tags in der HTML-Datei deutlich gekennzeichnet. (Hinweis: Diese Tags werden in Code-Editoren wie CodePen oft ausgelassen.)
Um ein „div“-Element zu erstellen, müssen Sie einen öffnenden und einen schließenden Tag verwenden. Sie können Elemente, die Sie zusammenfassen möchten, innerhalb dieser Tags platzieren. Diese erscheinen oft eingerückt, wie unten dargestellt.
<div class="myDiv">
<h2>Dies ist eine Überschrift in einem „div“-Element.</h2>
<p>Dies ist Text in einem „div“-Element.</p>
</div>
Nachdem wir nun die Definition und Syntax des „div“-Elements in HTML erläutert haben, sehen wir uns genauer an, was das Element bewirkt.
Was macht „div“ in HTML?
Der Tag <div> macht genaugenommen gar nichts. Er kann helfen, eine HTML-Datei im Backend in Abschnitte einzuteilen. Das hat zwar keinen Einfluss darauf, wie diese Abschnitte im Frontend angezeigt werden, allerdings können die Abschnitte dann mit CSS leicht gestylt werden.
Dazu müssen Sie dem „div“-Element ein „class“- oder „ID“-Attribut hinzufügen. Anschließend verwenden Sie einen CSS-Selektor, um den im „div“-Tag enthaltenen Elementen eindeutige Styling-Eigenschaften zuzuweisen.
Bevor wir uns ein Beispiel mit CSS vornehmen, sehen wir uns zunächst ein Beispiel für ein ungestyltes „div“-Element an.
Hier ist das HTML und daneben das Ergebnis:
Siehe das Pen-Beispiel von Christina Perricone (@hubspot) auf CodePen
Ein „div“-Element bewirkt also allein nichts. Jetzt fragen Sie sich vielleicht, warum Sie es dann überhaupt verwenden sollten. Schauen wir uns einige Anwendungsfälle an.
Warum sollte man „div“-Elemente in HTML verwenden?
In der Regel verwenden Sie das „div“-Element, um Codeabschnitte zu gruppieren, die Sie mit CSS bearbeiten möchten. So können Sie einzelne Abschnitte voneinander abgrenzen oder anders positionieren. Sie können aber auch z. B. ein „div“-Element und das Attribut „lang“ verwenden, um die Sprache eines bestimmten Abschnitts auf der Seite zu ändern.
Schauen wir uns ein paar Anwendungsfälle einmal näher an.
<div>-Tag-Beispiele
Der <div>-Tag ist am besten geeignet, um Abschnitten ein Styling oder einer Gruppe von aufeinanderfolgenden Elementen eine gemeinsame Semantik hinzuzufügen. Hier sind einige Beispiele für Styling oder Semantik, die Sie mit dem „div“-Element hinzufügen können.
Beispiel 1: <div>-Tag mit Attribut „lang“
Fangen wir mit dem einfachsten Beispiel an. Angenommen, die Standardsprache des Textes auf einer Website ist Deutsch, aber ein Abschnitt enthält Text in einer anderen Sprache. Um diesen besonderen Abschnitt auf einer Website zu markieren, platzieren Sie die Elemente einfach in einem „div“-Tag. Fügen Sie dann ein „lang“-Attribut hinzu und setzen Sie die gewünschte Sprache ein. Für diese Demo richte ich Französisch ein.
Hier ist das HTML:
<article lang="dt">
<p>Die Standardsprache der Website ist Deutsch. Aber nachfolgend haben wir einen Satz auf Französisch, der im Code entsprechend gekennzeichnet ist.</p>
<div lang="fr">
<p>Dans le numéro de novembre de Marie Claire, une erreur s'est glissée dans la rubrique Mode Actualités.</p>
</div>
<p>Dies ist ein deutscher Text außerhalb des „div“-Elements.</p>
</article>
Dadurch wird die Sprache der Überschrift und des Absatzes innerhalb des gesamten „div“-Tags festgelegt, so dass Sie die Sprache nicht für jedes Element einzeln festlegen müssen. Die Elemente außerhalb des „div“-Tags werden weiterhin in der Standardsprache (Deutsch) angezeigt.
Beispiel 2: <div>-Tag mit Attribut „class“
Sehen wir uns nun ein Beispiel an, bei dem Sie ein „div“-Tag verwenden, um das Aussehen eines Abschnitts Ihrer Website zu ändern.
Um den Stil des „div“-Elements zu ändern, beginnen Sie genau wie im ersten Beispiel, fügen aber statt eines Sprachattributs ein „ID“- oder „class“-Attribut hinzu. Mit dem entsprechenden Selektor fügen Sie dann das gewünschte CSS hinzu.
Angenommen, Sie möchten eine bestimmte Überschrift und einen bestimmten Absatz auf der Seite stylen und den Rest ungestylt lassen. Dann schließen Sie die einzelnen Überschriften und Absätze in ein „div“-Element ein und geben ihm einen „class“-Namen. In diesem Beispiel verwenden wir „myDiv“ als Namen.
So sieht das dann in HTML aus:
<div class="myDiv">
<h2>Dies ist eine Überschrift in einem „div“-Element.</h2>
<p>Dies ist Text in einem „div“-Element.</p>
</div>
<p>Dies ist Text außerhalb des „div“-Elements.</p>
Im Header-Bereich Ihres HTML-Dokuments oder in einem externen Stylesheet können Sie dann den Klassenselektor „.myDiv“ verwenden und die gewünschten CSS-Eigenschaften definieren. In diesem Fall verwenden wir die Eigenschaften „border“, „background color“, „text-align“ und „color“.
So sieht das in CSS aus:
.myDiv {
font-family: 'Arial';
font-weight: bold;
border: 5px outset #00A4BD;
color: #2D3E50;
background-color: #EAF0F6;
text-align: center;
}
Und so sieht dann das Ergebnis aus:
Siehe das Pen-Beispiel „Styled div“ von Christina Perricone (@hubspot) auf CodePen
Beispiel 3: <div>-Tag als Flexbox
Sehen wir uns nun ein Beispiel an, bei dem Sie „div“ verwenden, um die Position oder das Layout eines Abschnitts Ihrer Website zu ändern.
Ich möchte eine Flexbox mit sieben Spalten erstellen. Zunächst erstelle ich sieben „div“-Elemente, die ich dann innerhalb eines weiteren „div“-Elements platziere. Ich füge die Klasse „.flex-container“ zu diesem übergeordneten „div“-Tag hinzu.
So sieht das in HTML aus:
<body>
<h1>Flexbox Container</h1>
<p>Sehen Sie, wie die Flex-Elemente bei der Größenänderung des Browsers schrumpfen und sich ausdehnen, aber nicht den gesamten Container ausfüllen, sobald das Ansichtsfenster über einen bestimmten Punkt hinaus erweitert wird?</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
Dann verwende ich im Header des Dokuments oder in einem externen Stylesheet den Klassenselektor „.flex-container“, um den Container flexibel zu machen. Nachdem ich die Eigenschaft „display“ auf „flex“ gesetzt habe, lege ich die Höhe des Containers sowie die Hintergrundfarbe fest. Um die Flex-Elemente innerhalb des Containers zu stylen, verwende ich den Selektor „.flex-container > div“.
So sieht das in CSS aus:
.flex-container {
display: flex;
height: 200px;
background-color: #00A4BD;
}
.flex-container > div {
background-color: #EAF0F6;
width: 90px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 60px;
flex: 1 1 200px;
}
Und so sieht das Ergebnis aus:
Siehe das Pen-Beispiel „<div>-Tag als Flexbox“ von Christina Perricone (@hubspot) auf CodePen
Schauen wir uns an, wie sich der Flex-Container und die Elemente bei der Größenänderung des Browsers verhalten:
Aufteilung Ihres HTML
Das „div“-Tag ist eines der am häufigsten verwendeten Elemente in HTML. Es hat zwar mehrere Aufgaben, aber seine Hauptaufgabe besteht darin, HTML-Elemente zu gruppieren, damit Sie sie mit CSS stylen können. Das macht das „div“-Element zu einem Instrument, mit dem Sie Ihre Website genau nach Ihren Wünschen gestalten können. Und das Beste: Es ist äußerst benutzerfreundlich.
Titelbild: AnnaStills / iStock / Getty Images Plus
