Seite 1 von 1

Layout erstellen?

Verfasst: 08.12.2008 12:25
von FCM
Hallo,

mein CMS hat beinhaltet leider noch viele Tabellenkonstrukte. Ich will alles auf DIV-Container umstellen. Doch irgendwie bin ich jetzt voll verwirrt. Jemand hat mir folgendes in einem anderen Forum geschrieben, weil ich sagte, das ich EasyHP (orangeTaste) auf DIVs umstellen will:
Nicht verschachtelte Tabellen zerstören nicht zwangsläufig die Barrierefreiheit. Es gibt etliche Vorteile, warum man Tabellen nicht zu Layoutzwecken nuten sollte, aber der eigentliche Grund ist der, dass HTML nicht zu Layoutzwecken gedacht ist und dafür Tabellen einzusetzen einfach semantisch nicht korrekt ist.

Aber genau das selbe gilt auch für <div>. <div> ist HTML, HTML ist nicht für Layout gedacht, also sind <div> auch nicht für Layout gedacht. <div> können hilfreich sein, insbesondere beim Gruppieren von Elementen. Aber Layout mit <div> zu machen ist genauso falsch, wie Layout mit Tabellen.

Der einzige Vorteil: Mehrfach ineinander verschachtelte <div> sind immer noch barrierefrei.
Jetzt frage ich mich: Wie soll ich denn das Layout sonst machen? In HTML soll/darf ich nicht ... . Wie denn dann? Kenne mich eben nicht sehr gut mit Layouts/Designs/Styles usw. (wie das alles auch heißen mag) aus. Bin eigentlich nur der Programmierer und war im Glauben, mit DIVs alles richtig zu machen.

Bitte um Aufklärung!

LG, EloKoN

Verfasst: 08.12.2008 15:54
von gn#36
Nur div Container zu nutzen ist ebenfalls die falsche Wahl, denn div Container haben zwar nicht die falsche semantische Bedeutung wie Tabellen, aber sie haben stattdessen gar keine semantische Bedeutung was auch nicht unbedingt besser ist.

Es gibt sehr viele HTML Elemente mit semantischer Bedeutung die du nutzen kannst und per CSS formatieren kannst.

Ein paar Beispiele wären:
  • Benutze <hX>Überschrift</hX> (X ist eine Zahl wie 1,2,3,..)
  • Benutze <ol> oder <ul> für Listen (auch Menüs sind Listen!)
  • Benutze <table> für echte Tabellen
  • Benutze <fieldset> für die Gruppierung von Feldern und <label> für Beschreibungstexte an Feldern
  • <p> für Textparagraphen
  • <em> für wichtige Texte
  • Benutze description lists für komplexere Listen
  • Benutze <a> nur für echte Links und Anker
Solche Dinge solltest du primär auch mit zur Formatierung nutzen, in den meisten Fällen kann man damit schon recht nette Layoute erstellen. Alles was darüber hinaus nicht so ganz geht, aber mit dem Inhalt an sich überhaupt nichts zu tun hat machst du mit div und span (zwei Elemente die keinerlei echte HTML Bedeutung besitzen).