div in HTML: Alles Wichtige zur Verwendung des div-Containers

Mit dem div-Tag werden Inhalte in HTML aufgeteilt und abgetrennt. Da der div-Container keinerlei eigene semantische Bedeutung hat, wird sein Einsatz nur dann empfohlen, wenn andere Elemente nicht verwendet werden können.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Was ist ein div-Container und wozu wird er verwendet?

Eine gute Vorstellung davon, was es mit HTML div auf sich hat, bekommt man mit einem Blick auf die Herkunft des Begriffs. div leitet sich ab vom englischen Wort division, also „Bereich“, „Abteilung“ oder auch „Aufteilung“ und „Spaltung“. Ein div-Container dient vornehmlich als Behälter für andere HTML-Elemente. Zwar ist es so möglich, Gruppen und Bereich zu positionieren; eine eigene semantische Bedeutung hat div in HTML allerdings nicht. Seine vornehmliche Aufgabe ist es daher, Bereiche zu erzeugen und abzugrenzen, die dann mit CSS formatiert werden können. Einen Einfluss auf Layout oder Inhalt einer Website hat der div-Container dabei nicht.

Das führt auch dazu, dass div in HTML keine so große Rolle mehr spielt. Während der div-Container in früheren Versionen durchaus häufig Verwendung fand, wurde sein Einsatz mit HTML5 und HTML 5.1 massiv eingeschränkt. Lediglich wenn kein anderes Element – z. B. article, aside, header, main, nav oder section – eingesetzt werden kann, soll beim Aufbau auf den div-Container zurückgegriffen werden. Es wird daher empfohlen, vor der Nutzung von div in HTML zuerst nach semantisch passenderen Lösungen zu suchen. Als Block-Level-Element wird der div-Container in je einen Zeileneinbruch davor und einen danach eingefügt.

Wie wird div in HTML eingesetzt?

div wird in HTML vornehmlich eingesetzt, um HTML-Elemente mit CSS zu formatieren, die optisch zusammengehören, um verschiedene HTML-Blöcke zu bündeln und übersichtlich zu positionieren sowie um HTML, CSS und Inhalt mit Hilfe von JavaScript zu animieren. Anhand des folgenden Beispiels können Sie sehen, wie ein div-Container ohne Attribute aufgebaut wird:

<div>
<h2>Beispielliste</h2>
<ul>
<li>Erster Punkt auf der Liste</li>
<li>Zweiter Punkt auf der Liste</li>
<li>Dritter Punkt auf der Liste</li>
<li>Vierter Punkt auf der Liste</li>
</ul>
</div>

Innerhalb des div-Containers kann dabei grundsätzlich nahezu jeder fließende Inhalt stehen. div hat in HTML keinerlei Auswirkungen auf die Content-Darstellung, sondern grenzt den Inhalt lediglich ab.

Welche Attribute unterstützt der div-Container?

div unterstützt in HTML nur die globalen Attribute. Eine Ausnahme bildet dabei align, das seit der Einführung von HTML5 für div-Container nicht mehr zulässig ist. Die am häufigsten verwendeten HTML-Attribute für div sind class und id. Hier sehen Sie zwei Beispiele für div-Container mit Attributen:

<div class="Beispiel">
<h2>Hier steht eine beispielhafte Überschrift</h2>
<p>Hier können Sie einen Beispieltext einfügen, der durch den div-Container abgegrenzt wird.</p>
</div>

Auch das id-Attribut kann problemlos mit einem div-Container verwendet werden:

<div id="Beispiel">
<ul>
<li><a href="index.html" title="Zur Startseite">Startseite</a></li>
<li><a href="contact.html" title="Schreiben Sie uns">Kontakt</a></li>
<li><a href="about.html" title="Über uns">About</a></li>
</ul>
</div>

Fazit: div gehört in HTML größtenteils der Vergangenheit an

Es gibt verschiedene Gründe, warum div in HTML keine große Rolle mehr spielt. Dabei geht es weniger um Probleme, die ein div-Container mit sich bringt, sondern eher um die Tatsache, dass semantische HTML-Tags die Daten deutlich besser strukturieren und so die Pflege sehr viel einfacher machen. Auch Korrekturen innerhalb des Dokuments können durch andere Objekte wie header, footer, article oder section erheblich schneller durchgeführt werden. Wenn Sie HTML lernen oder CSS lernen, ist es zwar gut, auch div zu kennen; verwenden sollten Sie allerdings eher semantisch passendere Elemente.

Tipp

Sie wissen selbst am besten, wie Ihre eigene Website aussehen soll? Mit dem Homepage-Baukasten von IONOS bauen Sie Ihren professionellen Online-Auftritt einfach eigenhändig. Sollten Sie dabei doch Hilfe benötigen, stehen Ihnen unsere fachkundigen Expertinnen und Experten mit Rat und Tat zur Seite.

War dieser Artikel hilfreich?