HTML div-Tag für Ebenen

Einfachere Gestaltung der Elemente

In den Anfangsjahren des Webdesign bestanden nahezu alle Webseiten aus einer Layouttabelle. Damit war eine Tabelle gemeint, in der die einzelnen Spalten vordefiniert waren und jeder Inhalt, egal ob es der eigentliche Inhalt war, der Kopfbereich (Header) oder die Hauptnavigation, bekam durch die Tabelle seinen Platz zugewiesen.

Allerdings sind Tabellen sehr sperrig und oft hat man viele Tabellen ineinander verschachteln müssen, um zum gewünschten Ergebnis zu gelangen. Damit wurde der Quellcode aufgeblasen und für Menschen, die sich die Webseite vorlesen lassen wie hochgradig Sehbehinderte oder Blinde, waren die Webseiten wenig brauchbar.

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Dazu kommt, dass immer mehr mobile Geräte Internet konsumieren konnten und auch dort spielt die Ladezeit eine Rolle. Durch die Tabelle wird der Quellcode viel größer als nötig und das sollte vermieden werden. Mittlerweile nutzen mehr Leute mit mobilen Geräten die Seiten als mit dem Computer. Statt der Tabellen wurden also Ebenen mit dem div-Tag eingesetzt.

Div-Tag für Ebenen und Elemente in HTML

Beispiel Tabelle:

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Beispiel mit CSS:

CSS und Div ersetzten die Layouttabellen

Die Alternative besteht darin, mittels CSS barrierefrei zu programmieren und dazu braucht es einen anderen Ansatz und der besteht durch den DIV-Tag. Div steht für division, übersetzt Bereich. Der div-Tag wurde früher nur verwendet, wenn man den Text anders positionieren wollte, vor allem, wenn man von linksbündig auf zentriert umgeschaltet hatte.

Heute kann man mit div-Tags barrierefrei programmieren, indem die Spalten einer Webseite in jeweilige sogenannte div-Container legt, die mit CSS-Klassen ausgestattet werden. Beispielsweise eine dreispaltige Webseite besteht aus drei Divs, jedes Div repräsentiert eine Spalte. Mittels CSS kann man die Breite, die Abstände, die Farben und selbst die Schriftgröße voreinstellen und damit wird der Quellcode der Webseite viel schlanker, weil all diese Einstellungen ursprünglich direkt im Quellcode vorgenommen wurden.

Dazu ist man mit dem div-Tag viel flexibler, weil die linke Spalte viel niedriger sein kann als die rechte Spalte. Bei der Tabelle musste alles auf gleicher Höhe beginnen und enden und nur mit Tricks erreichte man sein Ziel. Somit ist der div-Tag eine deutliche Arbeitserleichterung, vor allem dann, wenn man CSS beherrscht.

Und es kam noch ein Punkt hinzu, weil durch die vermehrte Nutzung mit mobilen Geräten brauchte es auch eine schlankere Lösung, aber ohne Reduzierung des Informationsangebotes. Die erste Lösung mit einer eigenen mobilen Seite erwies sich als aufwendig und auch nicht optimal. So setzte sich die responsive Darstellung durch, indem sich die Seiten dank CSS und div-Tag an die Größe des verwendeten Gerätes anpasst und das wurde zum Standard für alle Arten von Besuche - sei es mit dem PC oder sei es mit dem Handy.

Lesen Sie auch

Die Positionierung auf der Webseite ist eines der Themen, die am stärksten verändert wurden. Statt der Layouttabelle wird mit Ebenen, den div-Tags gearbeiten, die Framesets gibt es nicht mehr und auch die align-Befehle werden zwar noch verwendet, sind aber durch CSS praktisch abgelöst worden.

Mit dem align-Zusatz horizontal und valign vertikal hat man lange Jahre die Texte an Bilder ausgerichtet und umgekehrt, mit CSS-Definitionen lässt sich das aber längst leichter bewerkstelligen.

Align
Valign

Ein anderes Thema ist die Ebene mit dem div-Tag, die auch für die responsive Darstellung für Handys und andere Geräte zuständig ist. In Kombination mit CSS gelingen so sehr übersichtliche Seiten, die sich auch anpassen können. Ebenfalls oft im Einsatz ist ein besonders Element auf der Seite und zwar der IFrame als Platzhalter für externen Inhalt wie etwa Börsennachrichten.

Themenseiten

Startseite HTML-Grundlagen

HTML div-Tag für Ebenen

Einfachere Gestaltung der Elemente

Div-Tag für Ebenen und Elemente in HTML

CSS und Div ersetzten die Layouttabellen

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich