Semantisch korrekt oder simpel und leicht

**dead_orc** · 10.08.2006 19:03

Da wir gerade im IRC ne kleine Diskussion zu dem Thema hatten, möchte ich euch einfach mal fragen, was ihr für besser haltet und selbst praktiziert: Gestaltet ihr eure Webseiten so semantisch korrekt wie möglich (<hx> für Überschriften, Texte schön in <p></p> und alles was einer Aufzählung ähnelt [z.B. eine Navigation

] als echte Auflistung) oder macht ihr es euch einfach und benutzt für alles <div> und <span> und gestaltet eure Designs hauptsächlich mit Tabellen?

FF · 10.08.2006 19:09

span hab ich noch nie genutz, find ich sinnlos....
Benutze div, p, überschriften, und eigentlich alles so korrekt wie möglich^^
ich versuche es zumindest.
tabellen sucken.

ne, navi mach ich ned als listen, sondern einfach als untereinanderstehende links die alle display:block gedingst werden.

**Manni** · 10.08.2006 19:10

Ich bekenne mich als Tabellen-Benutzer. Ich versuche allerdings <div>s bzw eben die korrekten Tags wie <hx> und Listen da zu benutzen, wo sie auch hingehören und ein bisschen von den Tabellen wegzukommen

Wobei ich Tabellendesigns nicht so schlimm finde, wie die meisten anderen hier im Forum

Tabellen sind halt einfach praktisch. Und ob divs mit display: inline-table oder sowas wirklich besser sind - Ich glaubs nicht.

**mitaki** · 10.08.2006 19:40

Eines vorweg, mit deiner Überschrift implizierst du, sematisch korrektes HTML sei nicht simpel und leicht.

h1, p, blockquote, ul, ol und wie sie nicht alle heißen sind alle bereits mit Formatierungen ausgestattet. Das erlaubt es graphischen Browsern, ohne weitere Stylesheetangaben ein Dokument so darzustellen, dass man Überschriften und Absätze voneinander unterscheiden kann.

Im Gegensatz dazu wäre eine div/span Suppe a la

HTML-Code:

<div class="ueberschrift"><span class="kategorie1">Hallo</span> <span class="separator">&gt;&gt;</span> <span class="kategorie2">Welt</span> <span class="satzzeichen">!</span>

Das habe ich mir nicht ausgedacht. Entsprechende Fälle sind keine Seltenheit. Freenet bringt es auf 445 <div>s...
Wenn das nicht kompliziert ist?

Ich selbst gehe so gut wie möglich semantisch vor. Die Überschriften erster und zweiter Ordnung verstecke ich, da sie nur für Textbrowser relevant sind. Die anderen verwende ich je nach Bedarf.
Ich verwende kein <b> und kein <i> (<u> sowieso nicht), stattdessen verwende ich <em> und <strong>. Halt mag jetzt jemand sagen, semantisch etwas falsch verwenden ist doch böse.
Das ist richtig, aber indem ich nur <em> und <strong> verwende zwinge ich mich selbst immer wieder nachzudenken, ob dieses Wort wirklich betont werden muss. Nicht selten bin ich dann zur Entscheidung der Nichtnotwendigkeit gekommen.
Auch verwende ich Listen, dank Stylesheets sieht man es ihnen aber nicht an, man hat eben künstlerische Freiheit

Sematisches Auszeichnen mit HTML macht viel Sinn:

Nicht-graphische Browser (Braille, Speaker, etc.) sprechen keinen langen Fließtext, sondern Überschriften und Absätze mit entsprechender Betonung.
Suchmaschienen können korrektes HTML besser Verarbeiten und weisen ihm mehr bedeutung zu. Das bezieht sich teilweise auf die strengere XHTML Syntax.

**Maisaffe** · 10.08.2006 21:14

Auflistungen meist in Listenelementen, Menü's vielleicht demnächst in Listenelementen (habe schonmal ein Versuch mit CSS gestartet und es war garnichtmal so übel).
Gegen Tabellenwebseiten habe ich nicht's einzuwenden, propagandiere jedoch lieber CSS Webseiten, da diese "komplizierter" umsetzbar sind und viele Leute sich von einfachen Betitelungen wie "Kann jeder Benutzer lesen oder vorlesen lassn, geniale Barrierefreiheit, bla..." begeistern lassen - auch wenn die Seiten der Leute garnicht für diese kleinere Gruppe von Menschen gemacht sein sollte/ müsste.

Im Grunde ist es mir Schnuppe wie jemand seine Seite erstellt, aber ich lege Wert auf selbstgeschriebenen Code (von mir aus auch per PHP verunstaltet in der "schönen" Form - sprich Einrückungen usw.).

Wenn ich für jemand ein Design slicen soll verwende ich auch nur CSS, wenn ich ein Slice ausbessern soll das auf Tabellen bassiert kommt es auf die Tabelleneinteilung an, erstelle jedoch meist auch wieder auf CSS basierende Enddateien (aber auch nur wenn ich mit dem Tabellenzeug das ich geliefert bekomme nicht allzuviel anfangen kann ohne mich groß damit zu beschäftigen [habe kein WYSIWYG Editor - will auch nur selten einen

] - die finde ich einfach schöner.

Zu Texten: Ich verwende meist <div> Elemente für Texte, ich verstehe die <p> Elemente nicht so richtig wegen Ihrer äußeren Formatierung - und deren Abständen - aber ich habe mich auch noch nie richtig mit ihnen beschäftigt.

**drunken monkey** · 11.08.2006 10:43

Ich habe nie Tabellen für Layouts verwendet, würde mich da auch erstmal einarbeiten müssen, daher bleibe ich sicher bei der <div>-Variante. Überschriften kennzeichne ich auch immer mit entsprechenden <h*>-Tags und verwende für Absätze in letzter Zeit auch meistens <p>-Elemente.
Den ganz radikal korrekten Kurs mit <strong>, <em> und Listen bei der Navigation habe ich allerdings nicht eingeschlagen, kommt aber vielleicht noch, wenn ich mal eine komplett neue Site machen sollte. Grundsätzlich finde ich nämlich schon, dass man Elemente so verwenden sollte, wie sie vorgesehen sind, das W3C bestimmt das ja nicht aus Willkür oder zum Spaß. o_O

@ Dennis: Die Abstände bei <p>-Elementen bekommst du doch ganz einfach mit "padding: 0px; margin: 0px;" weg. o_O

**Maisaffe** · 11.08.2006 11:45

Zitat von drunken monkey

@ Dennis: Die Abstände bei <p>-Elementen bekommst du doch ganz einfach mit "padding: 0px; margin: 0px;" weg. o_O

Ich weiß, aber das wäre dann unnötig, da kann man dann gleich <div> Elemente nehmen.

**Manni** · 11.08.2006 13:33

Zitat von dennis_meckel

Ich weiß, aber das wäre dann unnötig, da kann man dann gleich <div> Elemente nehmen.

Eben nicht. Es geht ja gerade um die Vorformatierung, die zB in Textbrowsern bzw bei fehlendem CSS ihre Wirkung zeigt. Und es geht ums Prinzip: <div>s sind nichtssagende Tags, die keine besondere Bedeutung haben, sondern eben einfach nur zur Formatierung benutzt werden können. <p>s sind Absätze, sie haben also eine sinnvolle Bedeutung innerhalb des Textes.

**dead_orc** · 11.08.2006 22:19

Da ich inzwischen wiederholt Kritik daran erhalten habe, dass semantisch korrekt != komplex/kompliziert/whatever ist, möchte ich hier einmal sagen dass ich mit "simpel und leicht" so Aussagen wie

Zitat von dennis_meckel

Ich weiß, aber das wäre dann unnötig, da kann man dann gleich <div> Elemente nehmen.

meinte. Da hat man die Wahl zwischen etwas mehr Aufwand mit <hx>, das dafür korrekt wäre, oder viel weniger Aufwand mit <div> (ist nur minimal, da man nur padding und margin anpassen müssen sollte, aber naja). Aber da Dingsi ja nun Mod ist kann er sich ja einen besseren Titel ausdenken

**Jesus_666** · 15.08.2006 14:40

Ich möchte nur kurz zur XHTML-Diskussion anmerken, daß - wie F² schon angemerkt hat - bis zur übernächsten IE-Version (frühestens) alle IE-User keinen richtigen XHTML-Support haben. XHTML wird, sofern es nicht mit dem MIME-Typ application/xhtml+xml ausgeliefert wird, über den HTML-Parser geparst (das schreibt das W3C so vor). IE bis einschließlich Version 7 unterstützt application/xhtml+xml nicht, was bedeutet, daß die Seiten als text/html ausgeliefert werden müssen, womit weder XHTML 1.1 noch XHTML 2.0 sinnvoll verwendet werden können (sie werden wie HTML 4.01 behandelt, haben aber im Gegensatz zu Version 1.0 eine zu HTML 4.01 inkompatible Syntax).

Wenn man schon XHTML benutzt sollte man XHTML 1.0 Strict benutzen und auf HTML-Kompatibilität achten. Oder man sperrt alle IE-User aus der Seite aus (oder man verwendet eine Browserschranke, was aber selten wirklich gut funktioniert).

Wenn ich noch mal eine öffentliche Seite mache werde ich wohl folgende Richtlinien befolgen:
- HTML 4.01 Strict mit CSS1 und Teilen von CSS2 verwenden (als Abwärtskompatibilität zu IE6/IE7); als Encoding UTF-8 verwenden
- Falls die Navigation auf Listen aufbaut diese ans Ende des Dokuments legen und dann per CSS nach oben positionieren; so müssen Textbrowser sich den Müll nicht immer ansehen
- Semantische Korrektheit da einsetzen, wo sie Sinn macht. Das Semantische Web ist tot und die meisten Textbrowser stellen Überschriften ohnehin nicht groß anders dar
- Kein AJAX verwenden, zumindest nicht für Funktionen irgendwelcher Relevanz. AJAX = JavaScript = in ernsthaften, auf Kompatibilität ausgelegten Seiten nur für Spielereien zu verwenden

**mitaki** · 15.08.2006 15:19

Zitat

IE bis einschließlich Version 7 unterstützt application/xhtml+xml nicht, [...]

In der Hinsicht finde ich Chris Wilsons Statement interessant, nachdem der MIME-Typ erst implementiert wird, wenn XHTML gut verarbeitet werden kann.
Meiner Meinung ein Fortschritt für die Software die sich Browser schimpft. Aber das kann man natürlich in alle Richtungen interpretieren.

**rgb** · 16.08.2006 16:29

Ich habe früher für meine Designs auch noch Tabellen benutzt, das Design meiner neusten Website erstelle ich mit <div>'s, auch wenn ich da teilweise arge probleme mit habe, meistens sind es irgendwelche Pixelränder, die bei Browser A auftauchen, bei Browser B aber nicht, und die alternative geht dann bei B wieder nicht.

Naja ist wohl eine Sache der Übung

**Jesus_666** · 17.08.2006 20:40

Zitat von mitaki

In der Hinsicht finde ich Chris Wilsons Statement interessant, nachdem der MIME-Typ erst implementiert wird, wenn XHTML gut verarbeitet werden kann.
Meiner Meinung ein Fortschritt für die Software die sich Browser schimpft. Aber das kann man natürlich in alle Richtungen interpretieren.

Die Frage ist dann, warum der IE so großspurig mit seinem achsotollen CSS2-Support daherkommt... Jetzt mal ehrlich: In allen anderen Bereichen ist Microsoft "wird schon irgendwie funktionieren" auch genug.

Naja, ich betrachte XHTML ehrlich gesagt als relativ tot. Bis der IE XHTML2 unterstützt wird der Rest der Welt sich einen anderen, zu HTML kompatiblen Standard gesucht haben. Vielleicht bleiben wir auch einfach noch ein paar Jahre bei HTML 4.01 stehen.

Naja, lassen wir das. Webdesign ist keine exakte Wissenschaft und früher oder später wird sich schon der nächste permanente ad hoc-Standard finden.

**mitaki** · 17.08.2006 21:19

Wie gesagt, die Meinungen gehen hier sicher sehr weit auseinander.

Allerdings empfinde ich den IE7 als Tropfen auf den heißen Stein. Nun, ich bin weisgott kein MS Fan, aber IE7 behebt einige Fehler - nervige Fehler. Attributselektoren und der abbr-Tag sind endlich verfügbar.

Ich muss aber auch gestehen, dass ich XHTML2 nicht viel Zukunft zugestehe, wenn ich den momentanen Stand so sehe. Wenn der IE mit dem nächsten Schritt genug Marktanteile erhält werden wir vermutlich doch mit verkapptem XHTML weitermachen müssen.

**Teelicht** · 20.08.2006 23:52

Also ich benutze div's, vielleicht sogar zuviel... auf eine einwandfreie W3C Validierung komme ich trotzdem nicht immer, obwohl ich mir dafür redlich Mühe geben. Aber für Php brauch ich ab und zu einen name-Attribut, ich kenne bisher keine Alternative dazu...

Ansonsten bemühe ich mich bei meinen Seiten um den Grundsatz von NetBSD: "Of course it runs!" - ich lege also wert darauf, dass meine Seiten möglichst überall laufen, egal, ob Internet Explorer, FireFox, Opera, Netscape, Windows, Linux, 1024x768, 1600x1200. Einziger Haken ist, dass ich nicht alles testen kann, zur Zeit nur die "großen" Browser (IE, NN, Opera, Firefox) und bequem nur auf Windows mit 1024x768 und 800x600. Letztere Auflösung wird selten von mir unterstützt, da ich es kaum schaffe, 800x600 UND 1600x1200 zu unterstützen und der Trend ja Richtung größere Auflösungen geht. Mac OS X, Safari und OmniWeb kommen hoffentlich bald ins Testspektrum dazu.

Technisch versuche ich mich natürlich weitestgehend an den W3C Standart zu halten, damit es eben überall läuft, mit den üblichen id-Tricks für Internet Explorer... Man kennt ja die Probleme, die er hervorruft. Aber ich komme ganz gut klar...

Sagt mal, es behaupten immer alle, ein xHtml Dokument könne im Internet Explorer 7 nicht korrekt angezeigt werden, wenn es mit "application/xhtml+xml" geschickt wird - warum funktioniert es dann bei mir? Hab ich einen einmaligen Internet Explorer 7 oder mach ich etwas falsch? Folgender Code wird problemlos von Internet Explorer 7 angezeigt, IE 6 kann ich nicht testen, weil ich den erst mal wiederbekommen muss^^:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Hallo Welt mit xHtml 1.1</title>
</head>

<body>

	Ein herzliches &raquo;Hallo Welt&laquo; mit xHtml 1.1!

</body>
</html>

**mitaki** · 21.08.2006 02:12

Hm, ich vermute du bist so einfrig und verwendest XHTML 1.1. Davon ist allgemein abzuraten, da der IE den dafür benötigten MIME Typ ja nicht kennt.
Das name Attribut ist in XHTML 1.0 noch in allen Varianten enthalten. Dokumente dieser Art dürfen auch als text/html ausgeliefert werden. -- Mehr dazu in meinem gepinnten Thread.

Zu deiner Frage:
Wenn ein Browser eine HTML Datei herunterläd sagt ihm meist der Server per HTTP Header, wie er die Datei verarbeiten muss.
Der Server liefert HTML Dateien mit dem MIME Typ text/html aus. Daraus folgt, dass der Browser den HTML Parser verwendet.
Was du meinst ist lediglich die meta Angabe, die ist zwar ebenfalls sehr wichtig, aber die Browser gehen nach dem HTTP-Header.

Versuch mal, folgenden PHP Befehl am anfang der Datei einzufügen:

PHP-Code:


<?php
header('content-type: application/xhtml+xml; charset=iso-8859-1');
?>

Nun wird der der Internet Explorer die Datei zum download anbieten, anstatt sie zu verarbeiten, denn der Server sendet die Datei als application/xhtml+xml aus.
Standardkonforme Browser schalten damit automatisch in den Full Standard Compilance Modus und verwenden einen XML Parser. Dadurch werden Fehler in der Syntax sofort erkannt und angezeigt.

David Hammond hat eine Tabelle erstellt, die dir genau anzeigt, wann welcher Browser welchen Modus anwendet und ob das Dokument als SGML oder XML Dokument geparst wird.

**Jesus_666** · 21.08.2006 04:12

Zitat von mitaki

Was du meinst ist lediglich die meta Angabe, die ist zwar ebenfalls sehr wichtig, aber die Browser gehen nach dem HTTP-Header.

Tatsächlich würde der <meta>-Tag so wie er da steht zu Problemen führen, weil einige Browser in einr HTML-Datei das Encoding nur dann aus dem Tag extrahieren können, wenn als MIME-Typ auch text/html angegeben ist. In deinem Fall würden einige Browser also das Encoding verwenden, das der Webserver im Header angibt - egal, was du in dem <meta> angegeben hast.

**Teelicht** · 21.08.2006 22:53

Zitat von mitaki

Nun wird der der Internet Explorer die Datei zum download anbieten, anstatt sie zu verarbeiten, denn der Server sendet die Datei als application/xhtml+xml aus.

Tatsächlich, Recht hast du^^ Danke für die Erklärung! Wobei ich mich dann ja langsam frage, warum ich den Typ überhaupt noch angeben muss... genauso wie das mit dem Schriftencoding - können diese dusseligen Browser das nicht einfach automatisch aus der Datei entnehmen? Naja, egal...

Auf jedenfall mag ich den Internet Explorer immer weniger... veraltete Techniken, langsam, das Design ist zwar gegenüber IE6.0 verbessert worden, aber immernoch um sehr deutlich verbesserungswürdig, die Favoritenverwaltung ist nach wie vor grottenschlecht und Opera bietet immernoch mehr Funktionen... *wuuuäääääähhhhh* ich werd ganz schnell wieder zum Opera wechseln *hilfe*

Das XHTML 1.0 das name-Attribut kennt, ist mir neu! Ich dachte immer, das sei nur in Transitional akzeptiert und in Strict rausgeschmissen! Na gut, dann ist das mit dem Standart ja kein Problem mehr, auf zum Validator! ^^

Aber um dann doch noch mal ne dumme Frage zu stellen:

Zitat von http://www.webdevout.net/doctype_switching.php

A document sent with the text/html content type and an XHTML doctype will still be treated as an HTML document, but with some "custom" differences in elements and attributes

Da stellt sich doch für mich als Webdesigner die Frage, was für Vorteile XHTML jetzt zu diesem Zeitpunkt schon bietet!? Wenn es sowieso als HTML interpretiert wird.... Ich mag zwar XHTML mehr, aber das ist ja nun ein sehr vager Grund... Die Erweiterbarkeit von XHTML kann man - nehme ich mal stumpf an - im Moment sowieso vergessen, weil das bestimmt eh noch kaum ein Browser unterstützt, oder? Also: was ist der JETZTIGE Vorteil von XHTML gegenüber HTML? Das in Zukunft alles nur noch für XHTML spricht, ist mir klar, aber die Zeit ist lang und die Zukunft weit (um mal das russische Sprichwort etwas verunglückt zu modifizieren^^)

**mitaki** · 11.08.2006 13:50

Zitat

ne, navi mach ich ned als listen, sondern einfach als untereinanderstehende links die alle display:block gedingst werden.

Warum soll das besser sein als eine Liste? Listen sind entsprechend formatierbar und im Textbrowser auch als soclche erkennbar.

Zitat

Wobei ich Tabellendesigns nicht so schlimm finde, wie die meisten anderen hier im Forum Tabellen sind halt einfach praktisch. Und ob divs mit display: inline-table oder sowas wirklich besser sind - Ich glaubs nicht.

Vermutlich ist gegen eine einzge Tabelle nichts auszusetzen, mein altes Projekt basierte beispielsweise auch auf einer Tabelle und war mit Lynx sehr gut darstellbar.

Tatsache ist aber, dass sich mit Stylesheets wesentlich mehr herausholen lässt, und das, obwohl einige werwirrte Leute noch eine bestimmte Software als Browser misverstehen.

Zitat

Gegen Tabellenwebseiten habe ich nicht's einzuwenden, propagandiere jedoch lieber CSS Webseiten, da diese "komplizierter" umsetzbar sind und viele Leute sich von einfachen Betitelungen wie "Kann jeder Benutzer lesen oder vorlesen lassn, geniale Barrierefreiheit, bla..." begeistern lassen - auch wenn die Seiten der Leute garnicht für diese kleinere Gruppe von Menschen gemacht sein sollte/ müsste.

CSS ist nicht komplizierter. Der HTML Code lässt sich bei standardnahen Designs besser Warten als mit unzählich verschachtelten Tabellen. Sicher werden dann mehr als 4 <div>s gebraucht, mit denen ich z.B. in meinem aktuellem Projekt auskomme.
Aber du darfsst gutes CSS Design nicht mit meinen Negativbeispielen oben verwechseln.

Zum Vorlesen: Ich selbst und viele meiner Bekannten lassen sich Internetseiten vorlesen, obwohl unsere Augen noch sehr gut sehen. Von daher sollte man nicht ausgehen, dass nur blinde Menschen sich was vorlesen lassen.

Bezüglich Barrierefreiheit: Ist dir schon mal in den Sinn gekommen, dass immer mehr Mobiltelefone und Handhelds (Tragbare PDAs, die PSP, Nintendo DS) im internet surfen können? Wie sollen diese Geräte deine Seiten darstellen? Und besitzer dieser Geräte können durchaus zu deiner Zielgruppe gehören!
Gerade deshalb ist es auch wichtig <p> statt <div> zu verwenden!
<p> sagt einem graphischen Browser dass ein Absatz von einem anderem unterschieden werden kann. Dies trifft auch ohne formatierung auf Textbrowser zu.
Verwendest du dagegen <div> Sieht man nur lauter zusammengeklebte Textblöcke und ich tu mich schwer, dem Text dann entsprechend Bedetung zuzurdnen, so geht es sicher auch manchen Suchmaschinen.

**Manni** · 11.08.2006 16:05

Zitat von mitaki

Vermutlich ist gegen eine einzge Tabelle nichts auszusetzen, mein altes Projekt basierte beispielsweise auch auf einer Tabelle und war mit Lynx sehr gut darstellbar.

Tatsache ist aber, dass sich mit Stylesheets wesentlich mehr herausholen lässt, und das, obwohl einige werwirrte Leute noch eine bestimmte Software als Browser misverstehen.

Ich frag mich, warum CSS und Tabellen immer als gegensätzlich gesehen werden. Ich kann meine Tabelle doch auch mit CSS formatieren...

Thema: Semantisch korrekt oder simpel und leicht

Themen-Optionen

Anzeige

Hybrid-Darstellung

Semantisch korrekt oder simpel und leicht

Berechtigungen