Webseiten Layouts mit DIV's bzw. CSS

Status
Nicht offen für weitere Antworten.
Hi,

sehr guter Text! Absolut!

Es geht mir auch weder um eine Verteufelung noch eine Glorifizierung von semantischem Markup. Semantisches Markup ist schlicht eine Notwendigkeit. Es geht mir einfach nur darum, klarzustellen, daß alleine die Verwendung eines div statt einer Tabelle noch lange kein semantisches Markup ist.

Deswegen: In dem Artikel wird von Bedeutung geredet. Ich habe das als Sein bezeichnet. Darum geht es, wenn man Markup so benutzt, wie es gemeint ist. In diesem Sinne ist übrigens, wie bereits oben geschrieben, eine Liste als Markup für eine Navigationsl(e)iste tatsächlich besser. Aber nicht deshalb, weil eine Liste ein Blockelement ist und man dieses so und so darstellen (per css formatieren) kann, sondern weil es eine Liste ist. Ich bin deswegen bei meinem Beispiel bei div geblieben, weil eben der Eindruck entstand, daß allein die Verwendung eines div bereits semantisches Markup darstellt. War vermutlich so nicht gemeint, aber es sollte einfach klar herausgestellt werden.

Um nochmal auf den (berechtigten) Einwand von Hawky zurückzukommen: Klar, wir sind hier von einer konkreten Frage etwas auf eine Grundsatzdiskussion gekommen. Aber die ist durchaus nützlich. Wenn man diesen Artikel verstanden hat, dann ergibt sich die Antwort auf die ursprüngliche Frage von selber, und die Antwort auf ähnliche Fragen gleich mit:
Tabelle? Klar, wenn es sich um tabellarische Daten handelt. Die Daten als Gesamtheit sind eine Tabelle. Oder, um bei den Worten dieses Artikels zu bleiben: Die Bedeutung dieser Daten ist "Tabelle".
Liste: Immer. Jedenfalls, wenn es sich um eine Liste handelt. Ist es eine Liste? Ist die Bedeutung dessen, was ich da produziere, eine Liste? Dann als Liste markieren.
div-Container? Immer dann, wenn man allgemeine blockorientierte Layoutprobleme lösen muß, die nicht durch besseres Markup hinzukriegen sind. Also, wenn es sich partout nicht um eine Liste und nicht um eine Tabelle und nicht um ein Zitat oder was auch immer handelt, sondern in keine dieser Kategorien passt, dann div. Und wenn es ähnlich allgemein ist, aber nicht blockorientiert, sondern inline, dann span. Zusätzlich impliziert semantisches Markup in diesen Fällen einen geeigneten Klassennamen oder gar eine geeignete ID.

Zusammengefasst: In dieser Grundsatzdiskussion geht es durchaus um die Beantwortung der Eingangsfrage, nur aus Gründen der Verallgemeinerbarkeit resp. Anwendbarkeit auf ähnliche Fragestellungen eben allgemein. Im Grunde so, daß der Fragesteller die Möglichkeit hat, sich die Frage selbst zu beantworten.
 
Der Artikel ist schon sehr interessant und sehr hilfreich, allerdings dreht es sich nur um Text also Content! Wie ist das wenn man ein recht aufwändiges grafisches Layout hat, sollte man das in Tabellen packen ich mein formatieren kann man ja immernoch mit css (also den content) .

Aber ich bin definitiv schlauer als vorher!
 
Semantisches Markup bedeutet schlich und einfach: Schreibe, was Du meinst, und meine, was Du schreibst. Es bedeutet, Inhalten eine Bedeutung oder eine Metainformation mitzugeben: Überschriften werden als HTML-Überschriften, Absätze als HTML-Absätzen, Listen zu HTML-Listen, tabellarische Daten als HTML-Tabellen ausgezeichnet. Jedes Element besitzt eine bestimmte semantische Bedeutung. Und auch nur zu diesem Zweck sollte es eingesetzt werden.

Das heißt auch, dass nur der tatsächliche Inhalt ausgezeichnet werden sollte – nicht mehr. Dazu kommt auch die strikte Unterscheidung von deskriptiven und dekorativen Grafiken.
 
Hallo,

mit dem Verwenden von sematischen Code bin ich eigentlich schon vetraut, aber mir ist eben aufgefallen, das ich eigentlich immer einfach den CSS Klassen belibiege Namen gebe.

Das ist aber dann nicht mehr semantisch oder?

Wen man es richtig macht mit den Klassennamen, worauf sollte man dann noch achten, müssen die semantischen Klassennamen auch in Englisch geschrieben werden oder ist das egal.

Was wäre wenn jeder seine Muttersprache verwenden würde für die Klassennamen, dann wäre es doch nicht mehr semantisch?
 
Hallo son gohan,

bei der Wahl semantischen Codes geht es um die treffende Auswahl der HTML-Elemente. Diese HTML-Elemente sollten inhaltlich den "harten Kern" der Seite bilden, so dass auch ohne CSS die Seite möglichst lesbar ist und somit klar wird, worum es hier inhaltlich überhaupt geht.
Mit CSS kann dann der "HTML-Kern" nach dem Prinzip "die Form folgt dem Inhalt" zum Layout geformt werden. Bei der Namensgebung von IDs und CSS-Klassen hast du die freie Auswahl. Am besten gibst du ihnen m.E. solche Namen, unter denen du dir auch nach Monaten oder auch Jahren noch etwas vorstellen kannst.
 
Markup nennt man die Auszeichnungen einer Auszeichnungssprache. Von semantischem Markup ist die Rede, wenn die Auszeichnungen aufgrund ihrer Semantik korrekt benutzt werden. Dies auch auf die Wahl der Klassenbezeichnungen zu übertragen, ist zwar löblich, wird nicht unbedings im Zusammenhang mit semantischem Markup gesetzt.
Denn Klassen werden häufig nur zu Formatierungszwecken genutzt und sind daher nur für die Entwickler interessant. Diesen treffende, auf ihre Semantik bezogene Bezeichnungen zu geben, kann daher nur im Interesse des Autors sein. Auch für Außenstehende wäre die Struktur dadurch schneller nachzuvollziehen.
 
Hi,
  1. Stimmt, aussagekräftige IDs und Klassennamen sind mehr als wünschenswert. Die Bezeichner sollten das angemessen bezeichnen, was ihr Inhalt ist.
  2. Sprache ist hierbei sekundär. Englisch wird halt international verstanden. Wenn Du Webentwicklungen machst, die vielleicht irgendwann man internationale Bedeutung haben werden, verwende besser Englisch. Ansonsten ist die Muttersprache mindestens genauso gut, vielleicht besser.

Ansonsten kann ich mich Gumbo nur anschließen. Allerdings ist das für Jemanden, der hauptsächlich in Designkategorien denkt, nicht leicht nachzuvollziehen. Daher vielleicht mal ein Versuch einer weiteren Interpretation:

Was ist Inhalt (Content)? Im Prinzip Alles, was in der fertigen Seite sichtbar ist. Ist dann die Navigation auch content? Ja! Content mit einer genau spezifizierten semantischen Bedeutung: Eine Liste von Navigationsmöglichkeiten. Ist ein Logo Content? Ja! Ist eine dekorative Hintergrundgrafik Content? Nein. Ist der gewählte Font Content? Nein. Ist ein Diagramm oder ein informatives Photo Content? Ja.

Vielleicht etwas technischer: Content ist die Schnittmenge aus dem, was ein üblicher Browser auf dem Bildschirm anzeigt und dem, was ein Screenreader aus der Webseite vorlesen kann. Der Rest ist Dekoration. Nicht, daß ich Dekoration für unwichtig halte, nur sollte man das auseinander halten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück