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:
Außerdem bekam ich nun einen Button angeboten, den ich auch hier mal eingebunden hab:
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.
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.
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
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.
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. 😉
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?
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
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 😉
Ich fang damit erst garnicht an…
Wenn der Blog läuft und einwandfrei angezeigt wird und ich wenig bis keinen Spam habe reicht mir das…
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.
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.
@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…..
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
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
@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
@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…
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.
@morris
Offtopic: Hey – Der Header in Deiner Seite ist wirklich klasse. Den hat auch Hombertho im Einsatz(?) Gibt’s da „was Fertiges“?
@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?
Ha… der hombertho hat sogar die gleiche Tag cloud… lol
(äh, sorry…. offtopic anmerkung)
@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 😉
@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
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 😀
Viele Grüße aus München
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 🙂
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!
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.