Layout ohne ?

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

irgendwo habe ich mal gelesen, dass das Layout mit CSS und divs nicht ideal sei, dass es auch ganz ohne div ginge (natürlich mit CSS) und dadurch Seiten (bzw. der Quellcode) noch übersichtlicher, schneller, schöner sei.

Die Frage, die sich mir stellt, ist: Wie?

Jeden Absatz, der anders als der Standard formatiert sein soll, zu kennzeichnen mit kann doch nicht die Lösung sein. (Oder etwa doch?)

Gibt es irgendwo eine Erklärung? Mit googlen bin ich nicht fündig geworden.

Vielen Dank schon einmal!

#2

Moin,

irgendwo habe ich mal gelesen, dass das Layout mit CSS und
divs nicht ideal sei

Das ist so nicht ganz korrekt.

dass es auch ganz ohne div ginge

Das stimmt sicherlich.

(natürlich mit CSS)

Das ist zwingend für Layout.

und dadurch Seiten (bzw. der Quellcode)
noch übersichtlicher, schneller, schöner sei.

Wenn man überall nur s einschmeißt, macht das den Code natürlich nicht übersichtlicher. Man muss sich mal nur überlegen, wozu das Tag im Sinne von HTML, also im Sinne der Semantik eigentlich da ist: dient nur zum Gruppieren mehrerer Elemente, meist zwecks gemeinsamer Formatierung. D.h. alle , die nur ein einzelnes Tag enthalten, sind grundsätzlich mal überflüssig.

Die Frage, die sich mir stellt, ist: Wie?

Einfach keine s verwenden, wenn sie nicht nötig sind!

Der Witz ist ja, dass man versteht, was HTML eigentlich ist. Und dass HTML nicht für das Layout geeignet ist. Daher ist es egal, ob man Layout mit , , oder macht, es ist immer falsch. HTML-Tags sezt man ja nur, um damit dem Inhalt eine Bedeutung zu geben.

Layout macht man dann immer mit CSS und baut auf dem validen, semantisch korrekten HTML-Code auf. Man formatiert mit CSS die Elemente, die aufgrund der Bedeutung des Inhalts bereits existieren. Man setzt keine neuen Tags nur fürs Layout (Ausnahmen bestätigen die Regel).

Jeden Absatz, der anders als der Standard formatiert sein
soll, zu kennzeichnen mit kann doch
nicht die Lösung sein. (Oder etwa doch?)

Wie denn sonst? Wozu sind denn IDs und Klassen da? Damit gibst Du Deinem Textabsatz eine weitere semantische Bedeutung, nämlich dass er zur Klasse der „TextVariante“-Textabsätze zählt. Und darauf kannst Du später mit CSS aufbauen.

Wie würdest Du denn in diesem Fall vorgehen, wenn nicht mit einer Klasse? Ich sehe da gar keinen Grund für den Einsatz eines Tags, egal für welches. Würdest Du schreiben ?
Und was würde das für einen Sinn machen? Wo wird da was gruppiert?

Gibt es irgendwo eine Erklärung? Mit googlen bin ich nicht
fündig geworden.

Ich denke, das ist noch nicht überall hin durchgedrungen, weil die meisten, die es nicht besser wissen, eigentlich noch gar nicht kapiert haben, was HTML eigentlich ist - zumindest ist das meine Erfahrung.

Ich kenne keine Site, die sich mit dem Thema wirklich ausgiebig befasst und die perfekt wäre. Aber ich kann gerne alle Deine Fragen beantworten.

Eventuell steht hier was dazu: http://www.vorsprungdurchwebstandards.de/
Oder auf den Unterseiten: http://www.vorsprungdurchwebstandards.de/theory/sema…
Besonders wohl auch hier: http://www.vorsprungdurchwebstandards.de/theory/retr…

Wenn dann noch Fragen sind, oder gerne auch schon vorher, einfach fragen!

Liebe Grüße,
-Efchen

P.S.: Es ist also nicht „Layout mit CSS“ das falsch ist, sondern „Layout mit HTML“, wobei egal ist ob "Layout mit " oder "Layout mit ", weil eben HTML allgemein nicht fürs Layout gedacht und geeignet ist.

#3

…oder schau doch mal hier, da hab ich mehr zu dem Thema geschrieben: http://www.wer-weiss-was.de/app/service/board_navi?A…

#4

Hallo,

vielen Dank für deine ausführliche und hilfreiche Antwort.

Die Frage, die sich mir stellt, ist: Wie?

Einfach keine s verwenden, wenn sie nicht nötig sind!

Vielleicht scheitert es noch daran bei mir: Die Unterscheidung, wann sie nötig sind und wann nicht…

Jeden Absatz, der anders als der Standard formatiert sein
soll, zu kennzeichnen mit kann doch
nicht die Lösung sein. (Oder etwa doch?)

Wie denn sonst? Wozu sind denn IDs und Klassen da? Damit gibst
Du Deinem Textabsatz eine weitere semantische Bedeutung,
nämlich dass er zur Klasse der „TextVariante“-Textabsätze
zählt. Und darauf kannst Du später mit CSS aufbauen.

Wie würdest Du denn in diesem Fall vorgehen, wenn nicht mit
einer Klasse?

Ich sehe (bei einer Zeile) nicht das Problem, aber irgendwie wird es unschön / kompliziert beim Schreiben (der Inhalte), wenn ich bei x aufeinanderfolgenden Absätzen jedesmal angebe, dass sie anders aussehen sollen, also etwa:

Zeile 1
Zeile 2
Zeile 3
Zeile 4

Da ist die Versuchung, einen div-Container zu verwenden, und „normale“ Absätze schreiben zu können, doch groß…

Gibt es irgendwo eine Erklärung? Mit googlen bin ich nicht
fündig geworden.

Ich denke, das ist noch nicht überall hin durchgedrungen, weil
die meisten, die es nicht besser wissen, eigentlich noch gar
nicht kapiert haben, was HTML eigentlich ist - zumindest ist
das meine Erfahrung.

Ich bin beim Googlen auch eher auf Seiten gestoßen, die genau das Gegenteil fordern: So viele divs wie möglich, der Übersichtlichkeit halber…
… oder, um ganz schnell komplette Designs wechseln zu können, wie etwa in http://www.csszengarden.com/ .

#5

Einfach keine s verwenden, wenn sie nicht nötig sind!

Vielleicht scheitert es noch daran bei mir: Die
Unterscheidung, wann sie nötig sind und wann nicht…

Naja, wie schon gesagt: In HTML hat jedes Tag eine Bedeutung. wirst Du nicht verwenden, um damit eine Überschrift auszuzeichnen, weil das für Adressen ist. Genauso wird man ein Menü nicht als oder auszeichnen, weil das für tabellarsiche Daten bzw. Textabschnitte reserviert ist. Ein Menü ist eine Liste, also ist
möglich.
Und hat die Bedeutung „Gruppieren mehrerer Elemente“. Also benutzt man das nur, wenn man mehrere Elemente zusammenfassen will, in der Regel, weil man sie gemeinsam formatieren will, z.B. mit einem gemeinsamen margin oder background-color. Wenn Du nur ein Tag hast, kannst Du diesem Tag direkt den margin oder die background-color (oder alle anderen Eigenschaften auch) geben.

Wie würdest Du denn in diesem Fall vorgehen, wenn nicht mit
einer Klasse?

Ich sehe (bei einer Zeile) nicht das Problem, aber irgendwie
wird es unschön / kompliziert beim Schreiben (der Inhalte),
wenn ich bei x aufeinanderfolgenden Absätzen jedesmal angebe,
dass sie anders aussehen sollen, also etwa:

Zeile 1
Zeile 2
Zeile 3
Zeile 4

Da ist die Versuchung, einen div-Container zu verwenden, und
„normale“ Absätze schreiben zu können, doch groß…

Hier würde ein Container um diese vier Abätze durchaus Sinn machen:

 Zeile 1 
 Zeile 2 
 Zeile 3 
 Zeile 4

Denn offensichtlich haben diese Textabsätze ja etwas gemeinsam, wenn sie alle die selbe Klasse bekommen. Dann kann man die einzelnen Absätze auch wunderbar mit „div.Text1b p“ ansprechen.

Ich bin beim Googlen auch eher auf Seiten gestoßen, die genau
das Gegenteil fordern: So viele divs wie möglich, der
Übersichtlichkeit halber…

Dass viele Tags die Übersichtlichkeit nicht erhöhen, liegt wohl auf der Hand.

… oder, um ganz schnell komplette Designs wechseln zu
können, wie etwa in http://www.csszengarden.com/ .

Dazu braucht man keine s.

Den Zen Garden geb ich auch immer gerne als Beispiel dafür, was mit CSS und externen Stylesheets möglich ist. Allerdings wird das hier ins Extreme gewandelt und dadurch wird dann der HTML-Code zwangsläufig sehr unübersichtlich und sehr mit vollgepackt. Für normale Websites ist das aber in der Regel nicht nötig.

Und auch bei Seiten, die nicht mit divs vollgestopft sind, kann man das Design durch bloßes Austauschen des externen Stylesheets komplett ändern.

Was aber noch viel häufiger gemacht wird, und das verstehen diese Leute dnan unter „Layout mit div“ ist, dass sie alles und JEDEN Inhalt in s verpacken. Alles.

Da kommen dann so Dinge vor wie

 Dies soll eine Überschrift sein

oder

…

Letzteres ist überflüssig, weil alles, was Du mit dem div#Menu machen kannst, Du auch direkt mit der Liste machen kannst (sind ja auch beides Block-Elemente).

Ersteres ist einfach nur Quatsch, weil das den Inhalt nicht zu einer Überschrift macht. Für Überschriften gibt es spezielle Tags und wenn man die nicht verwendet, wird der Inhalt auch nicht als Überschrift interpretiert - wie auch? Woran soll ein Client das erkennen? Er kann sich nur an die Vorgaben von HTML halten. Und da heißt es, Überschriften erkennt man an den Tags .

#6

Hallo,

danke nochmal für deine Erläuterungen.
Wahrscheinlich war mein größtes Problem das hier:

Hier würde ein Container um diese vier Abätze durchaus Sinn
machen:

Zeile 1
Zeile 2
Zeile 3
Zeile 4

Denn offensichtlich haben diese Textabsätze ja etwas
gemeinsam, wenn sie alle die selbe Klasse bekommen. Dann kann
man die einzelnen Absätze auch wunderbar mit „div.Text1b p“
ansprechen.

Da habe ich die „Anweisung“, keine divs zu verwenden wohl übergeneralisiert. Ich hatte es so verstanden, dass die insgesamt „verboten“ sind (und auf der Giftliste kurz hinter dem Design mit Tabellen rangieren).

(Zum Hintergrund: Ich erstelle gerade eine neue Seite und möchte natürlich die „neuesten Erkenntnisse“ mit einfließen lassen. Aber jetzt bleibt doch alles beim Alten…)

#7

Da habe ich die „Anweisung“, keine divs zu verwenden wohl
übergeneralisiert. Ich hatte es so verstanden, dass die
insgesamt „verboten“ sind (und auf der Giftliste kurz hinter
dem Design mit Tabellen rangieren).

Weder noch sind verboten. Beide haben eine semantische Bedeutung und dienen der logischen Inhaltsauszeichnung. Lediglich Tags für die physische Inhaltsauszeichnung wie , oder sind nicht im Sinne von HTML und daher tabu.

(Zum Hintergrund: Ich erstelle gerade eine neue Seite und
möchte natürlich die „neuesten Erkenntnisse“ mit einfließen
lassen. Aber jetzt bleibt doch alles beim Alten…)

Naja, eigentlich besinnt man sich ja wieder der eigentlichen Bedeutung von HTML. Was auch besser so ist. Und s sind grundsätzlich nicht verboten, zu viele davon erschweren aber deutlich die Übersicht. Und wenn bei übermäßiger Benutzung von die Semantik zu kurz kommt, sind s definitiv falsch angewendet. Das kennt man unter dem Begriff -Suppe.

Und Layout macht man nach wie vor nur mit CSS. :smile:

Kannst ja nen Link zur Site posten, ich schau gern mal drauf, ob mir unangemessene div-Nutzung auffällt.

Grüße,
-Efchen

#8

Kannst ja nen Link zur Site posten, ich schau gern mal drauf,
ob mir unangemessene div-Nutzung auffällt.

Danke für das Angebot.
Noch ist die Seite ganz stark „Work in Progress“ - ich bin da ja vorbildlich, ich mache mir erst Gedanken darüber und fange dann so langsam an zu arbeiten (habe das aus Fehlern gelernt… macht keinen Spaß, nach zig Seiten festzustellen, dass man doch etwas grundlegend anders machen möchte…)