W3C-XHTML-KonformitĂ€t und andere HĂŒrden

27 Kommentare
W3C-XHTML-KonformitĂ€t und andere HĂŒrden

Vor wenigen Wochen erhielt dieser kleine bescheidene Blog eine Frischzellenkur -  bzw. ein neues Theme (Frühjahrsputz bei plerzelwupp). Nachdem nun sämtliche Theme-Dateien übersetzt und die Funktionalitäten gewährleistet sind, soll das Ganze noch in den W3C-XHTML Standard gegossen werden, bevor die optischen Unzulänglichkeiten wie z.B. der Header verbessert werden. Im folgenden möchte ich (für Neulinge) kurz darstellen, warum das so wichtig ist, was da zu beachten ist und wie ich vorgegangen bin. 

Doch bevor wir zur täglich Praxis kommen, müssen wir uns mit der grauen universitären Theorie herumschlagen.


Wofür steht denn W3C?

Das W3C (World Wide Web Consortium) ist das Gremium zur Standardisierung der das World Wide Web betreffenden Techniken. Es wurde 1994 gegründet. Gründer und Vorsitzender des W3C ist Tim Berners-Lee, der auch als der Erfinder des World Wide Web bekannt ist. Das Deutsch-Österreichische Büro hat seinen Sitz im Fraunhofer Institut für Intelligente Analyse- und Informationssysteme in Schloss Birlinghoven.

Beispiele für durch das W3C standardisierte Techniken sind HTML, XHTML, XML, CSS, SVG, RSS und WCAG.

Quelle: Wikipedia

WordPress und XHTML

Aha … da soll also etwas standardisiert werden. Nämlich die Sprache XHTML  (“Extensible HyperText Markup Language”) zur Darstellung von Webseiten im Browser. Es ist eine textbasierte Sprache “zur Darstellung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten”. Die durch WordPress generierten Seiten sollten eigentlich dem W3C-XHTML-Standard gehorchen, doch sie tun es in der allerweinigsten Fällen, wenn nicht zusätzlich Hand angelegt wird. Denn allzu viele Rahmenbedingungen und Faktoren spielen bei der Erstzellung einer Seite mit ein: Zum einen sind die fertigen Themes von Haus aus nicht immer konform, zum anderen pfriemeln wir oftmals selbst in den Theme-Dateien herum, was dann wiederum zu Konformitätsproblemen führen kann. Außerdem fügen wir häufig Codeschnipsel in unsere Blogs ein – und sei es nur das eingebettete Youtube-Video, das nicht dem Standard gehorcht.

Warum sollte der Blog dem Standard gehorchen?

Wie der Name “XHTML-Standard” schon sagt, soll die Sprache gewissen Regeln gehorchen und einheitlich sein. Dadurch soll u.a. gewährleistet werden, dass Webseiten in allen Browsern ordentlich dargestellt werden – das heisst im Idealfall, dass der Blog in allen Brwosern gleich aussieht. Darüber hinaus nimmt ein valider Code Einfluss auf die Suchmaschinenfreundlichkeit.

Natürlich sollte man das nicht allzu hoch bewerten, denn eine ordentliche Stylesheet und zahlreiche weitere Faktoren gehören ebenso zu einem “sauberen Auftreten”. Letztendlich kommt es auf die Inhalte an.

Ist mein Blog W3C-XHTML konform?

Da hilft ein schneller Blick auf die Seite des Konsortiums. Dort findet Ihr den “Markup Validation Service“. Schnell noch die Adresse Eures Blogs dort eingeben, das Ganze prüfen lassen und enttäuscht sein. Ich war auch sehr enttäuscht, denn die Prüfung ergab bei mir 76 Mängel. “Oje”, dachte ich und war am Boden zerstört.

Doch mit etwas Engagement und dem Willen die Problematik anzugehen, wird es sehr schnell gelingen, zahlreiche Fehler auszumerzen. Bei mir war es beispielsweise so, dass irgendwelche Tags geschlossen waren, die nie aufgemacht wurden (das kann passieren, wenn man nicht gewissenhaft genug, Teile des Codes einer Theme-Datei herausnimmt). Das lässt sich durch die Fehlerausgabe relativ leicht feststellen. Bei der Prüfung wäre zu empfehlen, das Kästchen “Show Source” zu aktivieren. So findet Ihr durch die Zeilennummerierung schnell die fehlerhafte Stelle. Mit ein bisschen Fingerspitzengefühl und dem Betrachten des Codes werdet Ihr auch herausfinden können, zu welcher Datei der Code gehört. Keine Angst: Bei mir war es häufig so, dass aus die Korrektur eines kleinen Fehlers im Code, ein Dutzend weniger Fehler bei der Prüfung auftraten. Sicherlich wird dem Laihen mein früherer Artikel “WordPress Themes bearbeiten – die Dateien und deren Bedeutungen” beim Auffinden der maßgeblichen Dateien helfen. Ihr müsst kein php-Experte sein – Ihr solltet aber etwas Sachverstand (Einfühlungsvermögen) und Interesse haben. Außerdem solltet Ihr etwas “English” verstehen können.

Youtube-Videos W3C-XHTML-konform einbinden

Ein weiteres Dutzend Fehlermeldungen kamen von einem eingebundenen Youtube-Video “Skifoan” im Artikel “Hollersbach“. Der von Youtube angegebene Code zum Einbetten des Videos war schuld daran: Er ist i.V.m. WordPress nicht valide. Eine Lösung musste her. Bei Thomas (Jenseits des Wahnsinns) wurde ich fündig. Hier der Vorschlag zum valide Einbinden des Videos:

<div style=”text-align:center”><object type=”application/x-shockwave-flash” style=”width:425px; height:350px” data=”http://www.youtube.com/v/DEINE_VIDEO_ID“><param name=”movie” value=”http://www.youtube.com/v/DEINE_VIDEO_ID“></param></object></div>

Die Adresse des Videos im o.g. Artikel lautet: http://www.youtube.com/watch?v=hiGJq81Q4Ew – mit der Gelbmarkierung dürfte eigentlich klar werden, was in den Codeschnipsel einzutragen ist.

Fazit:

Durch die Beseitigung der Fehler wurde ich endlich vom Prüfer mit der erfreulichen Mitteilung belohnt:

Testergebnis

Außerdem bekam ich nun einen Button angeboten, den ich auch hier mal eingebunden hab: 

Valid XHTML 1.0 Transitional

Jedoch hat die Sache (für mich) einen kleinen Haken: Meine Startseite (Home) ist zwar sauber, aber die Artikel-Seiten weisen jeweils einen Fehler auf: ” there is no attribute “aria-required”, der aus den Pflicht-Kommentarfeldern resultiert. Ich habe mich entschlossen, mit diesem Fehler zu leben: Er wird kontrovers diskutiert und nach allem, was ich gefunden habe, soll es eigentlich auch gar kein Fehler sein. Um ehrlich zu sein – ich hatte dann auch keine Lust mehr. Sollte ein Profi das hier lesen, kann er uns vielleicht einen heißen Tipp geben.

Ich bin jedenfalls am Ende meiner Ausführungen und würde mich freuen, wenn Ihr diesenArtikel hilfreich findet. Wie gesagt – er richtet sich an Einsteiger (wie ich).

Was ergab denn Eure Konformitätsprüfung?

Meinem kleinen bescheidenen Blog steht es zwar nicht zu, ein Stöckchen zu werfen, aber vielleicht steigt ja der ein oder andere darauf ein:

  • Hast Du Dich schonmal darum gekümmert (Konformitätsprüfung)?
  • Bist du der Meinung, dass Validität wichtig ist?
  • Wieviel Fehler ergab denn Deine Prüfung?
  • Bist Du gewillt, Dir die Sache mal näher anzuschauen und die Fehler zu beseitigen?

Ansonsten freu ich mich über jegliche Kommentare – auch konstruktive Kritik ist jederzeit gerne Willkommen.

Artikel bewerten

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Bisher keine Bewertungen)
Loading...Loading...
  1. hi, also meine prĂŒfung ergab so 98 Fehler. Meine Website : http://www.gosleipnir.de

    Ich habe keine Ahnung wie ich die Fehler wegbekommen kann, da jeder Beitrag so im schnitt 50 Fehler hat, die ich eigentlich mit wordpress erstelle. ich weis auch nicht wie ich diese manuell korriegieren kann, denn es ist ja eigentlich alles richtig.
    scheinbar wird falsch geprĂŒft.

  2. Ola!

    KonformitÀt mit Standards mag am Anfang ein wenig Arbeit sein, spart die investierte Zeit aber locker wieder ein, wenn man mal was Àndern will.

    DarĂŒber hinaus “hilft” sie Browsern eine Webseite richtig darzustellen, ermöglicht es Screenreadern und Ă€hnlichen Bedienhilfen die Seite zu verstehen u.v.m.

    Leider gibt es GrenzfĂ€lle, in denen man Elemente einfach nicht XHTML-Konform kriegt. Videos sind ein klasisches Beispiel. Wer schonmal Versucht hat, ein Object mit einem RealMedia-Stream konform zu gestalten, weiß was ich meine :)

    KonformitÀt sollte aber beim Html nicht halt machen. Haste den auch einen Artikel zum CSS-Validator der W3C geplant?

    Mit hanfigen GrĂŒĂŸen
    Steffen

  3. Buhaahaa…71 Fehler, 3 Warnungen. Aaargh!!! Die Erfahrung hat gezeigt, dass viele Fehler mit wenigen Änderungen im Quellcode behoben werden können, aber ich muss mich da mal dransetzen, den ganzen Mist valide zu gestalten und den Code zu ĂŒberarbeiten. Ist halt ein Job fĂŒr “jemanden, der Vadder und Mudder totgeschlagen hat”. Aber ich tu’s, weil ich auch ein Verfechter des validen XHTML und CSS bin.

  4. Geniale ErklÀrung. Ich glaube, bei mir sieht es nichtmal so schlecht aus. 37 Errors, 3 warning(s)
    Nur selber daran “herumzuschrauben” das traue ich mich nun doch nicht. ;)

  5. plerzelwupp

    vielen Dank fĂŒr Eure Kommentare

    @Ersan
    willkommen im Blog :-)
    kannst du die Fehelrausgabe einigermaßen deuten? Auch du hast einige Tag-Fehler, die eigentlich relativ schnell behoben werden könnten. Dann gleich nochmals prĂŒfen – bei Fragen kannst du dich gerne nochmals hier her wenden.

    @Steffen Geyer
    das mit den “GrenzfĂ€llen” sehe ich auch so: In meinem Artikel hab ich auch von so einem Grenzfall berichtet. Der CSS-Validator motzt bei mir eigentlich nur, dass Vordergrund- und Hintergrundfarben in zwei Kontexten identisch sind. Eigentlich kann ich das vernachlĂ€ssigen(?) Mal sehen: geplant ist noch kein Artikel…..Peace;-)

    @Martin: Na, bei dir hab ich keine Angst, dass du das nicht hinbekommst. Vielleicht hab ich Dir einen kleinen Anstoß gegeben. Bei Problemen bin ich auch immer gerne behilflich.

    @Nila: Bei dir sieht das doch gut aus. Hab mir gerade mal dein Fehlerprotokoll angeschaut: Gleich ein Dutzend Fehler kannst du ausmerzen, wenn du zu deinem Bild “seperator.jpg” noch ein alt-tag hinzufĂŒgst. Das sind diese zwei Knuppel, die du auf deiner Startseite zwischen die Artikel einfĂŒgst (kommt vermutlich aus der index.php: dort einfach ein Attribut – z.b: alt=”seperator” hinzufĂŒgst). Außerdem hast du ein paar Tags geschlossen, die nicht auf sind (und umgekehrt)- das mĂŒsste doch auch schnell gehen. Insgesamt werden es vielleicht nur ca. 5 Fehler sein. Hab doch mut – ich helfe dir ;-) wo sind die Fragen?

  6. Oft resultiert eine hohe Fehlerzahl auch nur aus vorausgegangenen Fehlern. Wenn sich beispielsweise irgendwo ein falsch plaziertes Tag befindet, kann die logische Struktur nicht nachvollzogen werden.

    FĂŒr das Entwickeln von Webseiten und um die ValiditĂ€t von CSS- und (x)HTML-Dokumenten zu prĂŒfen, kann ich HTML-Tidy fĂŒr Firefox empfehlen – das erleichtert das Entwickeln um ein Vielfaches!

    Link: https://addons.mozilla.org/de/firefox/addon/249

  7. Danke dir, fĂŒr seine ausfĂŒhrliche ErklĂ€rung bzw. dein Hilfsangebot. Aber ich hab keinen blassen Schimmer, wie ich da etwas umschreiben soll. Ich war in letzter Zeit schon öfters kurz davor, mir meinen Blog zu zerschießen, und bin darum schon sehr vorsichtig geworden. Immer mĂ€chtig “Schimpfe” bekommen habe, von meinen PC-Retter in der Not.
    Liebe GrĂŒsse ;)

  8. Ich fang damit erst garnicht an… :mrgreen:
    Wenn der Blog lĂ€uft und einwandfrei angezeigt wird und ich wenig bis keinen Spam habe reicht mir das…

  9. cool, ich wusste gar nicht was man auf was man alles achten muss. bei der prĂŒfung meines blogs kommt:

    This document was successfully checked as XHTML 1.0 Transitional!

    einfach klasse.

  10. Hast Du Dich schonmal darum gekĂŒmmert (KonformitĂ€tsprĂŒfung)?
    - Bis ich den Artikel hier gelesen hab noch nicht.

    Bist du der Meinung, dass ValiditÀt wichtig ist?
    - Naja, schaden kann’s nicht… ;) Aber ich denke der Sinn von Standards ist auch deren Einhaltung.

    Wieviel Fehler ergab denn Deine PrĂŒfung?
    - 33 Fehler, 4 Warnungen.

    Bist Du gewillt, Dir die Sache mal nÀher anzuschauen und die Fehler zu beseitigen?
    - ich glaube, die Fehler sind z.T. recht klein. z.B. & / & . Leider bin ich ja nicht so fit in “Sprachen” und ĂŒberhaupt, beim logischen Aufbau bzw. der Struktur der einzelnen php.Files blicke ich leider noch nicht so durch. Also muss ich mich wieder durchbeissen – das kann dauern.

  11. plerzelwupp

    @Christina
    soeben waren es nur noch 27 Fehler. Das sieht doch schon ganz gut aus – wie du selbst sagts, sind die Fehler relativ klein. WĂŒrde mich mal interssieren wie sich das auswirkt, wenn du “und” anstelle “&” schreibst…..

  12. Ich achte immer auf w3c konform. Wenn Plugins nicht funktionieren, dann liegt es meist nur am schlechten Code einer Webseite und manchmal ist es nur ein AnfĂŒhrungszeichen, dass nicht geschlossen wurde.
    Bei meiner neuen Webseite hatte ich ĂŒber 384 Fehler. Bei mir gingen auch ein paar Stunden drauf aber jetzt bin ich zum GlĂŒck wieder clean.
    Ich finde es lohnt sich auf alle FĂ€lle sich die MĂŒhe zu machen und W3C konform zu sein ;-)
    Viele GrĂŒĂŸe
    Thomas

  13. W3C-KonformitĂ€t hat einenSinn und wer den Beitrag aufmerksam ließt versteht ihn vielleicht auch! Danke fĂŒr diesen wertvollen Beitrag!

    Deine Seite hat aber zum jetzigen Zeitpunkt: 16 Errors, 15 warning(s) :-)

    Es gibt ein tolles Plugin fĂŒr WP welches Dir aufzeigt welche Webseiten invalide sind. Du kannst es hier runterladen >>> WP-Plugin Directory

    Gruß Morris

  14. plerzelwupp

    @morris
    Vielen Dank fĂŒr den Hinweis. Ich war erschĂŒttert und hab das sofort ĂŒberprĂŒft. Wie ich das auf den ersten Blick sehe, stammen sĂ€mtliche Fehler von dem sexy-Bookmarks-plugin, das ich sofort ĂŒberprĂŒfen werde. Ansonsten fliegt’s raus.
    Vielen dank auch fĂŒr den Link zur FF-Extension

  15. @plerzelwupp

    Klar doch ;-)

    Ja, liegt an dem “tollen” Plugin… hatten es auch mal getestet. Die Links kann man aber auch von Hand ĂŒberall einfĂŒgen lassen bzw. es gibt auch noch valide Plugins dafĂŒr glaub ich… muss nochma nachgucken. Ich glaub wir haben es bei einem Kunden mal eingesetzt.

    Wenn ich’s finde, dann poste ich es hier…

  16. plerzelwupp

    Ok, der Fehler ist behoben. Die Seite ist wieder sauber.
    Der W3C-Validator hat nur eine einzige Fehlermeldung in der Artikel-Ansicht. Dieser Fehler ist eigentlich keine Fehler – da kann mann sicherlich unterschiedlicher Meinung sein.
    Die Startseite ist hingegen ist vollkommen w3c-konform.

  17. plerzelwupp

    @morris
    Offtopic: Hey – Der Header in Deiner Seite ist wirklich klasse. Den hat auch Hombertho im Einsatz(?) Gibt’s da “was Fertiges”?

  18. @plerzelwupp

    Thx :-) Unserer kommt von flashden.net. Glaub ich mich zumindest dran zu erinnern… haben da ewig rumgesucht bis wir das richtige hatten. Der ganze Rest ist WP mit einem Haufen von Plugins und vieles halt hardgecoded…

    Hab grad gesehen, dass es da auch grad nen Free XML Imageslider gibt.

    Vielleicht was fĂŒr Dich? °°

    Übringens, die Live-Vorschau hier find ich super genial!!! TOP! Was’n des fĂŒr’n Plugin?

  19. Ha… der hombertho hat sogar die gleiche Tag cloud… lol

    (Ă€h, sorry…. offtopic anmerkung)

  20. plerzelwupp

    @Morris
    Vielen Dank fĂŒr die Verlinkungen – da werd ich mich garantiert umsehen. Wie ich sehe, ist auch Homberthos header wohl von flashden.net

    Das Plugin mit der Live-Vorschau des Kommentars nennt sich “wmd-Editor for WordPress”. FĂŒr mich war es zunĂ€chst wichtiger, die Kommentare komfortabler editieren zu können, als Smilies einfĂŒgen zu können. Aber das ist sicherlich Geschmackssache.

    Ja die Tag-Cloud ist sehr hĂŒbsch – aber so unbekannt nun auch wieder nicht. Die hatte ich auch schon ;-)

  21. @plerzelwupp
    Danke fĂŒr den Link. Werden das zukĂŒnftig auch einsetzen. Ist ne prima Sache.

    Der Artikel hat mir im ĂŒbrigen wirklich sehr gut gefallen. Schreibe gerade auch einen Artikel zum Thema ValiditĂ€t und bin so auch auf Dich gestossen.

    Gruß Morris

    PS: Weitere Info ĂŒber unsere TĂ€tigkeit im BQWG – Bundesdeutsche Qualifizierungsstelle fĂŒr Werbeagenturen und Grafikdesigner e.V. unter http://www.bqwg.de

  22. Hi,

    als ich heute auf der suche war, warum mein Blog im Firefox immer falsch angezeigt wird (Navigation erst unter den beitrĂ€gen) bin ich auf die W3C KonformitĂ€t gestoßen.

    Ich hatte am anfang so 90 Fehler und nun 0 :) Trotzdem hab ich noch den blöden Anzeigefehler im Firefox.

    Mal schauen ob ich dafĂŒr auch noch eine Lösung finde :D

    Viele GrĂŒĂŸe aus MĂŒnchen

    • plerzelwupp

      ZunĂ€chst mal herzlich willkommen hier bei mir und vielen Dank fĂŒr Deine Nachricht. Dann noch einen herzlichen GlĂŒckwunsch zum W3C-konformen Blog – ich hab Deine seite gerade selbst geprĂŒft ;-)

      Der Anzeigefehler (linke Symbolleiste ganz unten) ist ĂŒbrigens auch im IE vorhanden.

      Hast Du mal versucht, sĂ€mtliche Plugins zu deaktivieren? Irgendetwas scheint auch mit Deiner header.php nicht in Ordnung zu sein – hast Du da etwas ausgetauscht?

      • Danke :)

        Oh nein du hast Recht, ich hab ihm IE8 den KompatibilitÀtsmodus an und dann wird es bei mir richtig angezeigt.

        Hab gerade mal alle Plugins ausgeschalten, dennoch ist die Navi falsch. Aber danke fĂŒr den Tipp.

        Ja ich hab den damaligen Header bearbeitet, dass ist allerdings schon 2 Jahre her. Hab dort das Bild ausgetauscht und die Farben angepasst. Das UrsprĂŒngliche Template war UnLimited 1.0.

      • Hi, also ein Mitglied aus dem Deutschen WordPress Forum hat mir ich soll doch mal im CSS bei Content noch clear:both; einfĂŒgen. Da gibt es wohl irgendein Problem mit den RSS Feeds.

        :) Nun klappts :)

  23. Sehr guter Beitrag, besonders der Aspekt mit den Youtubevideos gefĂ€llt mir, da es durch das bloße einbinden von Youtubevideos zwangslĂ€ufig zu weiteren Fehlern kommt.

    Weiter so!

  24. Hallo Oliver,

    ich bin gerade auch beim W3c optimieren meiner Website ‘perfect-knowhow.de’. Anfangs hatte ich 30 HTML-Errors, die nur und das ist schon Ă€rgerlich, durch Affiliate-Links verursacht wurden. Am Ende blieb dann nur noch einer und da musste ich schmunzeln, als ich bei der Lösungssuche auf Deinen Artikel gestoßen bin.

    Du schreibst nĂ€mlich “… aber die Artikel-Seiten weisen jeweils einen Fehler auf: ” there is no attribute “aria-required”, der aus den Pflicht-Kommentarfeldern resultiert. …. Ich habe mich entschlossen, mit diesem Fehler zu leben: Er wird kontrovers diskutiert”

    Nun, ich werde noch etwas weiterforschen in der Richtung und in den nĂ€chsten Tagen einen Blogartikel darĂŒber verfassen. Deinen Artikel werde ich als Link anfĂŒhren, denn ich finde ihn gut geschrieben. Was mir besonders gefĂ€llt, ist die EinfĂŒhrung in die Thematik, die Du gemacht hast mit
    – WofĂŒr steht W3c?
    – WordPress und XHTML
    – Warum sollte der Blog dem Standard gehorschen?

    Das werde ich mir dann sparen, aber so stelle ich mir einen Blogartikel vor :-)

    Gruß von der Bergstraße
    Manfred

    P.S.:
    Da ich sehen wollte, ob Du vielleicht inzwischen das “aria-required” Problem schon gelöst hast, habe ich diese Artikelseite ĂŒber den W3c Validator laufen lassen. Du scheinst etwas an deinem Template geĂ€ndert zu haben und hast Dir zwei “Schmutzzeilen” am Anfang der HTML Seite einfangen, mit dem Effekt, dass W3c deine Artikelseite nun gar nicht mehr mag/validiert. Check es am Besten gleich mal.

Trackbacks/Pingbacks

  1. Neu: Adobe Browser Lab - Webpage auf verschiedenen Browsern testen - GegenĂŒberstellung zweier Browser-Varianten 2-up-view, Klicken zum VergrĂ¶ĂŸern, Überlagern Onion-Skin-View, an easier faster solution for cross browser testing, Browser, Euch - Plerzel - [...] den Vorteil eines Blogs, der den W3C-Spezifikationen entspricht, hab ich vor einiger Zeit berichtet. Die Einhaltung des Standards ist …
  2. Sociable - Sociable, Bookmarks, Eure, Euch, Buttons, Icons - Plerzelwupps Erfahrungen - [...] die Sociable-Funktion mehr als einmal aufgerufen wird, liefert es in der Grundausstattung ca. 40 W3C-Konformitäts-Fehler in der Art "ID …
  3. Surftipps und noch mehr TellerrÀnder - Artikel, Blogeintrag, Mein, Windows, Stöckchen, Tasks - Plerzelwupps Erfahrungen - [...] Wer Youtube Videos W3C-konform einbinden möchte, dem sei dieser Artikel zu [...]

Einen Kommentar schreiben