Sie sind hier: Startseite -> HTML-Grundlagen -> Positionierung -> DIV (Ebenen)

HTML-Grundlagen: DIV

DIV: Grundlage für barrierefreies Programmieren

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.

Dazu kommt, dass immer mehr mobile Geräte Internet konsumieren können 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.

Beispiel Tabelle:

Beispiel gleiche Struktur mit divs´s

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.

Ebenfalls interessant:

Align

Informationen über die veraltete Positionierung in HTML mit align und die modernere Methode mit dem CSS-Befehl text-align.

Valign

Informationen über den Parameter valign, mit dem man in HTML Text positionieren kann, der aber durch CSS ersetzt wurde.

[aktuelle Seite]

DIV (Ebenen)

Informationen über den DIV-Tag, mit dem barrierefreie Spalten programmiert werden können.

Zurück zum Hauptthema

Übersicht Positionierung

Startseite HTML-Grundlagen