Mit dem div-Tag werden Inhalte in HTML auf­ge­teilt und ab­ge­trennt. Da der div-Container keinerlei eigene se­man­ti­sche Bedeutung hat, wird sein Einsatz nur dann empfohlen, wenn andere Elemente nicht verwendet werden können.

KI-Assistent kostenlos – Ihr smarter All­tags­hel­fer
  • DSGVO-konform & sicher gehostet in Deutsch­land
  • Pro­duk­ti­vi­tät steigern – weniger Aufwand, mehr Output
  • Direkt im Browser starten – ohne In­stal­la­ti­on

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

Eine gute Vor­stel­lung davon, was es mit HTML div auf sich hat, bekommt man mit einem Blick auf die Herkunft des Begriffs. div leitet sich ab vom eng­li­schen Wort division, also „Bereich“, „Abteilung“ oder auch „Auf­tei­lung“ und „Spaltung“. Ein div-Container dient vor­nehm­lich als Behälter für andere HTML-Elemente. Zwar ist es so möglich, Gruppen und Bereich zu po­si­tio­nie­ren; eine eigene se­man­ti­sche Bedeutung hat div in HTML al­ler­dings nicht. Seine vor­nehm­li­che Aufgabe ist es daher, Bereiche zu erzeugen und ab­zu­gren­zen, die dann mit CSS for­ma­tiert 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 Ver­wen­dung fand, wurde sein Einsatz mit HTML5 und HTML 5.1 massiv ein­ge­schränkt. Lediglich wenn kein anderes Element – z. B. article, aside, header, main, nav oder section – ein­ge­setzt werden kann, soll beim Aufbau auf den div-Container zu­rück­ge­grif­fen werden. Es wird daher empfohlen, vor der Nutzung von div in HTML zuerst nach se­man­tisch pas­sen­de­ren Lösungen zu suchen. Als Block-Level-Element wird der div-Container in je einen Zei­len­ein­bruch davor und einen danach eingefügt.

Wie wird div in HTML ein­ge­setzt?

div wird in HTML vor­nehm­lich ein­ge­setzt, um HTML-Elemente mit CSS zu for­ma­tie­ren, die optisch zu­sam­men­ge­hö­ren, um ver­schie­de­ne HTML-Blöcke zu bündeln und über­sicht­lich zu po­si­tio­nie­ren sowie um HTML, CSS und Inhalt mit Hilfe von Ja­va­Script 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-Con­tai­ners kann dabei grund­sätz­lich nahezu jeder fließende Inhalt stehen. div hat in HTML keinerlei Aus­wir­kun­gen auf die Content-Dar­stel­lung, sondern grenzt den Inhalt lediglich ab.

Welche Attribute un­ter­stützt der div-Container?

div un­ter­stützt in HTML nur die globalen Attribute. Eine Ausnahme bildet dabei align, das seit der Ein­füh­rung von HTML5 für div-Container nicht mehr zulässig ist. Die am häu­figs­ten ver­wen­de­ten HTML-Attribute für div sind class und id. Hier sehen Sie zwei Beispiele für div-Container mit At­tri­bu­ten:

<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 pro­blem­los 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öß­ten­teils der Ver­gan­gen­heit an

Es gibt ver­schie­de­ne 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 se­man­ti­sche HTML-Tags die Daten deutlich besser struk­tu­rie­ren und so die Pflege sehr viel einfacher machen. Auch Kor­rek­tu­ren innerhalb des Dokuments können durch andere Objekte wie header, footer, article oder section erheblich schneller durch­ge­führt werden. Wenn Sie HTML lernen oder CSS lernen, ist es zwar gut, auch div zu kennen; verwenden sollten Sie al­ler­dings eher se­man­tisch pas­sen­de­re Elemente.

Tipp

Sie wissen selbst am besten, wie Ihre eigene Website aussehen soll? Mit dem Homepage-Baukasten von IONOS bauen Sie Ihren pro­fes­sio­nel­len Online-Auftritt einfach ei­gen­hän­dig. Sollten Sie dabei doch Hilfe benötigen, stehen Ihnen unsere fach­kun­di­gen Ex­per­tin­nen und Experten mit Rat und Tat zur Seite.

Zum Hauptmenü