Valider Code ist nicht gleich guter Code!

psd zu html | codingpeople - webdesign trifft html - 20% Rabatt für alle Neukunden

In letzter Zeit kommt einem in Blog-Beiträgen und den darauf folgenden Diskussionen immer wieder häufiger das Argument unter, dass valider (X)HTML-Code auch guter Code sei. Diese Behauptung ist nicht richtig! Denn auch auf Tabellenlayouts basierende Webseiten können fehlerfrei und damit valide sein. Die Validität allein bezieht sich lediglich darauf, ob bei der Umsetzung des Codes Fehler erzeugt wurden oder nicht und nicht ob bspw. der Content auch seiner Bedeutung entsprechend ausgezeichnet worden ist. Auch die Behauptung valider Code ist barrierefrei, dürfte somit widerlegt sein. Denn auch valider Code basierend auf Tabellenlayouts, kann zu Barrieren für Internetnutzer führen! Validität sagt also nichts darüber aus, ob eine Webseite für seine Besucher optimiert und zugängig ist, sondern lediglich das der Code fehlerfrei ist. Welche Art von validem Code der "richtige Weg" ist, wird der weitere Verlauf dieses Artikel zeigen.

Ein Aspekt der bei der Umsetzung von Webseiten immer noch allzu häufig vernachlässigt wird und warum sich auch unter neuen Webseiten immer noch recht viele Webseiten wiederfinden die durchaus einer sogenannten Div-Suppe zugeordnet werden können, ist sich bereits beim Anlegen der Layouts Gedanken über die Bedeutung des zu verwendenden Inhaltes zu machen, um dann auf die der Bedeutung des Contents entsprechenden (X)HTML-Tags zurückzurgreifen. Ich nenne es in diesem Fall einmal "Semantik-Code".

Validität allein, bedeutet nichts!

Ok, valider Code allein bedeutet schon etwas, nämlich fehlerfrei zu sein, aber eben auch nicht mehr. Die folgenden zugegebenermaßen sehr übersichtlichen 3 Code-Beispiele sollen daher aufzeigen, dass alle 3 hier bisher angesprochenen "Techniken" valide umgesetzt werden können, allerdings noch lange nicht empfehlenswert sind. Denn einem Screenreader-Anwender bspw. erschliessen sich bei allen 3 Varianten zwar die Texte, allerdings nur im letzten auch die Bedeutung der Inhalte.

Valider HTML-Code - Tabellenlayout
<table>
  <tr>
    <td>Tabellenlayout</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet</td>
  </tr>
</table>

Valider HTML-Code - Div-Konstrukt
<div>
    Div-Konstrukt
</div>
<div>
    Lorem ipsum dolor sit amet
</div>

Valider HTML-Code - Semantik-Code
<h1>
    Semantik Code
</h1>
<p>
    Lorem ipsum dolor sit amet
</p>

Ein weiterer nicht zu vernachlässigender Aspekt des "semantischen Ansatzes" ist die besser Übersicht und Struktur den Quellcodes. Ein Grund der bspw. auch dazu führt, dass der ein oder andere Webdesigner / Webentwickler nicht auf CSS-Frameworks zurückgreift, da hier oftmals ein nicht unerheblicher Ballast an Code mitgeschleppt wird, um so viele potentielle Fehlerquellen wie möglich bspw. später via CSS ausschließen zu können. Ein weiterer Aspekt der bei dieser letzten der 3 Varianten erst richtig zum Tragen kommt, ist das dieser Content von Suchmaschinen wesentlich besser zu verarbeiten ist.

Strict vs. Transitional

Allerdings ist auch das noch nicht das Ende der Fahnenstange, denn auch die Entscheidung bezüglich der verwendeten Dokumenttyp-Definition (DTD) kann dafür sorgen, dass selbst valider Code nicht wirklich gut sein muss. Die Dokumenttyp-Definition legt im übrigen fest, welche HTML-Elemente verwendet werden können und wie diese Elemente verschachtelt sein sollten und welche dazugehörigen Attribute erlaubt sind. Die DTDs "Transitional" und "Strict" welche sowohl für HTML also auch für (X)HTML vorliegen, gehen allerdings "getrennte Wege". Während die Transitional-Variante bei diversen Elementen und Attributen wie bspw. den font-Tag noch toleriert und somit trotzdem noch zu einem validen Ergebnis kommen kann, entschuldigt die Strict-Variante solche "veralteten Elemente" nicht mehr und ist somit für den ein oder anderen schwieriger fehlerfrei umzusetzen. Erst wenn dieser auch noch fehlerfrei ist, dann kann dieser Code das in der Überschrift dieses Artikels verwendete Adjektiv "gut" erhalten.

Billomat - Rechnungen Online versenden

  1. Andreas 05 Mai 2009, 09:52

    Eines stimmt schon: Nur weil der Validator sagt, dass der HTML-Quelltext keine Fehler enthält, ist die Webseite noch nicht gut. Ich glaube aber, die ganze Prämisse des Artikels ist eine Verkürzung: Valider Code ist noch nicht automatisch guter Code, aber nicht valider Code ist ziemlich sicher schlechter Code: Dardurch, dass User Agents beliebig entscheiden können, wie sie mit fehlerhaftem (=nicht validen) Code umgehen, ist nicht valider Code automatisch mehrdeutig, und mehrdeutiger Code führt zu nicht immer voraussehbaren Ergebnissen auf der Nutzerseide. Validität ist deshalb für guten Code notwendig, aber nicht hinreichend dafür.


  2. Marjan 05 Mai 2009, 11:09

    Guter Beitrag, vor allem der semantische Ansatz. Ich hab' für mich das Gefühl, daß man erst hier so richtig lernt was Webdesign heißt. Wird meiner Ansicht nach viel zu oft auf reine Optik reduziert.

    CSS-Frameworks, wie z.B. auf http://960.gs finde ich grundsätzlich nicht so schlecht, da sie sich ja mit semantischen Strukturen verbinden lassen und die "traditionelle Arbeitsweise" trotzdem weitergführt werden kann. Ich nutze das momentan sehr gerne, weil ich mir einfach noch ein bißchen leichter damit tue - Container-Denken ;-)


  3. klaus_b
    05 Mai 2009, 11:18

    Andreas hat es wieter oben schon recht gut zusammengefasst.
    Ich möchte noch einen Schritt weitergehen und behaupte: valider Code, nach DTD "Strict", ist unabdingbar für guten Code.

    Servus,
    Klaus


  4. Robert
    05 Mai 2009, 12:14

    Die Darstellung des Unterschieds zwischen Strict und Transitional ist meines Erachtens irreführend.

    "Transitional" lässt ebensowenig wie "Strict" keineswegs Fehler zu oder ist toleranter gegenüber invalidem Markup, sondern beinhaltet ganz einfach zusätzliche erlaubte Attributwerte wie das beliebte "target" für das A-Element und veraltete Elemente wie etwa FONT.


  5. Webstandard-Team
    05 Mai 2009, 12:24

    @Robert: Danke für den Hinweis und den Link! Die Formulierung war vielleicht etwas unglücklich und wurde daher angepasst.


  6. GE
    05 Mai 2009, 12:38

    Kennt irgend jemand eine Seite, die ausschliesslich semantisches html verwendet? Kein div und schon gar nicht "layout-table"?

    Ich meine aber nicht eigene Seiten von Standardistas, sondern Seiten, die von einem Webdesigner oder einer Agentur für einen Kunden gemacht und verkauft wurden.

    Ich bin absoluter Fan von semantischem html, mag aber auch Seiten, die toll gestaltet sind. Dazu ist es aber wohl doch notwendig, das semantische html in eine "div-Suppe" einzubetten, vor allem, wenn man CSS-Hacks und CC ablehnt ...


  7. Mißfeldt
    05 Mai 2009, 12:51

    Danke für den Artikel.
    Ich sehe es auch wie Robert: Ich nutze (fast) nur transitional, weil ich das Target im Link einfach benutzerfreundlich finde (bei richtigem Umgang). Das basiert auf meinem Leseverhalten. Wenn ich einen Artikel lese, in dem ein Link zu einer Referenz oder Beispielseite gezeigt wird, dann möchte ich das in einem neuen Tab sehen. Wie oft habe ich schon was angeklickt, und mich über einen zusätzlichen "Zurück-Seiten-Neuaufbau" geärgert. Ok, kann auch die rechte Maus benutzen. Aber nicht nur, dass ich das oft vergesse, auch für die Struktur des Inhaltes finde ich es wichtig, externe, ergänzende Infos in einem neuen Tab anzubieten.

    Ansonsten sind wir uns wohl einig, dass gutes Webdesign immer aus einer Mischung aus "DIV-Konstrukten" (bzw. IDs) und "sematischer Content-Struktur" besteht. Ich kann mich nicht erinnern, wann ich zuletzt eine Seite gesehen habe, die ausschließlich semantisch strukturiert war.

    Übrigens kann man auch mit der "DIV"-Methode auch endlose Codewürmer bauen. Die Methode an sich reicht nicht, es kommt auch darauf an, wie intelligent und effektiv man das umsetzt.

    Gruß, Martin


  8. Webstandard-Team
    05 Mai 2009, 13:05

    @GE + Martin: Ausschließlich semantisch strukturiert ist vor allem bei etwas aufwendigerem Design kaum möglich ( wie von Euch erwähnt ), es ging in dem Beitrag auch hauptsächlich darum sich bei der Strukturierung des Codes an den Inhalten zu orientieren, was nicht heißt kein Div zu verwenden.

    Wo eine Überschrift, ein Zitat oder ein Formular angezeigt wird, sollten auch die entsprechenden Tags dafür verwendet werden und nicht ein Div nach dem anderen.


  9. GE
    05 Mai 2009, 13:13

    Hallo Webstandard-Team, mit diesem ergänzenden Kommentar von Euch kann ich den Artikel unterschreiben ;-)


  10. René
    05 Mai 2009, 20:23

    Transitional enthält ja bereits die eigentliche Überlegung im Namen. Transition … Übergang. So sollte man dies, meiner Meinung nach, auch handhaben. Aktuell noch verwendbar, sollte aber insgesamt abgelegt werden.

    Ich habe bisher keine Probleme mit Strict gehabt. Lediglich im Bereich XHTML 1.1 stolpert man … aber das liegt nicht an den Spezifikationen, sondern am IE der mit dem eigentlich benötigten Content-Type nicht klarkommt. Zumindest die, leider noch im Umlauf befindlichen, alten Versionen. :-(

    Ansonsten valide ist nur, auf Basis einer vom Menschen hergeleiteten und von einem Programm interpretierten, technischen Korrektheit zu ermitteln. Sinnhaftigkeit der Verwendung (ergo auch die Semantik) stehen auf einem anderen Blatt.

    Ich denke aber, viele die valide arbeiten, machen den kleinen Schritt hin zur logischen Auszeichnung mitunter bereits ganz unbewusst.

    Zumindest habe ich keinen gesehen, der in dem Bereich anfängt, paragraph als Überschrift zu formatieren und anderweitig zu schachteln. ;-)


  11. Mariusz
    06 Mai 2009, 07:44

    Wenn man schon auf Validitaet schaut, dann kann man doch auch Strict einsetzen.

    Verstehe die Diskussion um Transitional-verwendung nicht. Im Endeffekt nur ein Zugestaendnis fuer komplexe IT Architekturen. Siehe hier:

    http://24ways.org/2005/transitional-vs-strict-markup

    Der Satz trifft es ganz gut:
    "Transitional DOCTYPEs are meant for those making the transition from older markup to modern ways"

    Wenn man also Strict nutzen kann, dann nicht zoegern!


  12. FoolMoon
    10 Mai 2009, 15:04

    Ich finde validen Code sehr wichtig, schließlich behebt jeder Browser die Fehler anders.
    Nur so kann man sicherstellen das die Seite auf allen Browser gleich aussieht.


  13. Schocker Blogger
    13 Mai 2009, 11:50

    Hat man irgendwelche Vorteile, wenn man strict statt transitional benutzt? Steht man dann bei Google besser da, da es den Anschein erweckt, der Typ hinter dem Blog / der Seite kennt sich mit Webdesign aus? Oder ist das völlig rille?

    Schocker Blogger


  14. René
    13 Mai 2009, 12:48

    Für SuMa ist das völlig wurscht. Professionelle SEOs kriegen selbst verkorkste Tabellenstrukturen besser positioniert, als das schönste und semantischste Strict, wo nichts mit "gemacht wird".

    Ich kann auch HTML 4.01 Trans tabellenlos, semantisch, valide und barrierearm bis barrierefrei entwickeln … siehe: http://www.einfach-fuer-alle.de/


  15. Webstandard-Team
    13 Mai 2009, 13:32

    @Rene: Es geht ja nicht darum ob professionelle SEOs auch verkorkste Tabellenstrukturen gut positionieren könne, dass sieht man ja das das funktioniert. Und das eine solche Seite auch besser rankt als eine semantisch und fehlerfrei ausgezeichnet ohne SEO, ist auch klar. Ich habe nichts anderes behauptet.

    Wenn sich ein professioneller SEO um eine Webseite lediglich auf einem Tabellenlayout basierend und einem semantisch orientierten sowie fehlerfreien Code widmet, wird ersterer bestimmt nicht besser abschneiden.

    @Schocker Blogger: Der Vergleich zwischen "Strict und Transitional" bezog sich auf die Validität des Quellcodes solch ausgezeichneter Webseiten und nicht auf einem vielleicht daraus resultierenden besseren Ranking in den Suchmaschinen. Und ja, der "Typ" hinter dem Blog kennt sich mit Webdesign aus ;o)


  16. René
    13 Mai 2009, 14:27

    @Webstandard-Team … mein Comment bezog sich nur auf den vom Schocker Blogger … er hatte ja im Bezug auf SuMa gefragt. :-) Denen ist die Validität in vielen Punkten wirklich egal.

    Generell bin ich aber Verfechter von tabellenfreiem Design … unabhängig von Ranking, SEO und Co. … es spart mir meist mehr Zeit und ich bin flexibler.


  17. Karl
    24 Sep 2009, 17:10

    Ein großes Dankeschön in die Runde!

    Endlich mal aufklärende Infos und Kommentare, auf deren Basis ich meine HP mal etwas ausmisten kann, da besteht Optimierungsbedarf (meine ist von der Kategorie Divsuppe) :(


Artikel kommentieren





XHTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""> <abbr title=""> <b> <cite> <code> <em> <i> <strike> <strong>


authimage