HTML- und CSS-Code ist schnell erstellt. Doch entspricht die damit produzierte Website den offiziellen Vorgaben des W3C? Diese Frage spielt besonders dann eine Rolle, wenn man optimale Ergebnisse bei Suchmaschinen und beispielsweise auf mobilen Endgeräten erzielen möchte. Auch unter dem Gesichtspunkt der Barrierefreiheit macht einwandfreier HTML-Code Sinn. Zudem macht es normgerechter Code wahrscheinlicher, dass eine Website in allen gängigen Browsern einigermaßen gleich aussieht. Denn ungeachtet der Tatsache, dass Browser relativ fehlertolerant gegenüber HTML sind, kann ein und die selbe Website deutlich unterschiedlich aussehen, ja nachdem ob sie beispielsweise im Internet Explorer oder im Firefox geladen wird.
Video-Kurs “HTML5 und CSS3” bei Udemy ansehen
HTML-Code ist umso kompatibler, je mehr er sich an die gültigen Standards hält, wie sie vom World Wide Web Consortium festgelegt wurden. Inwiefern ein Dokument kompatibel ist, können Sie mit Hilfe eines HTML-Validators feststellen. Verwenden Sie Stylesheets (was bei einer modernen Website die Regel ist), benötigen Sie außerdem noch einen CSS-Validator. Einige (kostenpflichtige) Web-Editoren haben solche Werkzeuge im Lieferumfang, doch im Web finden Sie auch genügend kostenlose Werkzeuge, mit denen Sie überprüfen können, ob Ihr Code valide ist.
Auf den folgenden Seite stellen wir Ihnen Webseiten mit kostenlosen Online-Tools vor, mit denen Sie den HTML- und CSS-Code Ihrer Webseiten daraufhin überprüfen lassen können, ob er den vorgegebenen Standards und Normen entspricht. Außerdem beschreiben wir auch einige Tools, die Sie zum Check auf Ihrem Rechner installieren können.
Außerdem nennen wir Ihnen auch noch einige Webseiten, auf denen Sie die Javascript-Fähigkeiten der von Ihnen eingesetzten Browser unter die Lupe nehmen können. Wenn Sie beziehungsweise Ihre Mitarbeiter viel auf Seiten unterwegs sind, die stark auf Javascript-Funktionalität setzen, dann kann es durchaus zählbare Vorteile bieten, einen dafür optimierten Browser einzusetzen.
Ein wichtiger Hinweis vorweg: Wenn Sie eine Website erstellen, sollten Sie unbedingt im Header von jeder Seite den korrekten (X)HTML-Standard/Dokumententyp angeben (HTML, XHTML, strict, transitional) und den Zeichensatz festlegen (Beispiel: charset=iso-8859-1).
Markup Validation Service des W3C
Der erste Ausgangspunkt für die HTML-Code-Überprüfung (für HTML, XHTML etc.) sollte der Markup Validation Service des W3C sein. Das 1994 gegründete World Wide Web Consortium (W3C) ist das Gremium zur Standardisierung der im World Wide Web eingesetzten Techniken. Auf der Seite des HTML-Validators stellt das W3C übrigens auch Tools zur Überprüfung des CSS-Codes ( CSS Validator ) sowie einen Link-Checker zur Verfügung.
Auf drei verschiedene Arten können Sie hier den zu überprüfenden Quellcode eingeben: Als URL, wenn die zu überprüfende Website online erreichbar ist, als Datei-Upload, falls die HTML-Seite auf Ihrem Rechner liegt und per Copy&Paste als Quellcode direkt in das Eingabefenster des Validation Service. Klicken Sie dann auf “Check”. Die Fehlermeldungen lassen sich nach Typ oder nach der Reihenfolge ihres Auftretens sortieren, der zu checkende Zeichensatz kann ebenso wie der Doctype explizit voreingestellt werden, wenn man die automatischer Erkennung nicht möchte. Die Fehlermeldungen werden nach echten Fehlern (weißes Kreuz auf rotem Grund) und nach Warnungen (kenntlich gemacht durch ein gelbes Warndreieck mit Ausrufezeichen) unterschieden.
Erfahrungsgemäß wird der HTML-Validator immer etwas zu meckern finden, egal welchen HTML-Editor Sie verwenden. Kleinigkeiten wie nicht abgeschlossene oder falsch platzierte Tags, mehrfache Absatzumbrüche und Ähnliches müssen Sie aber nicht mühsam von Hand aus Ihrem Quelltext entfernen. Ein HTML-Dokument können Sie nämlich mit Hilfe von HTML TIDY von Fehlern bereinigen lassen. Es erkennt ungültige HTML-Tags und korrigiert diese. Eine grafische Benutzeroberfläche für HTML Tidy bietet HTML-Tidy GUI. Für beide Programme ist keine Installation nötig, Sie brauchen sie nur in das selbe Verzeichnis kopieren und können eine Verknüpfung am Ort Ihrer Wahl anlegen.
©2014
HTML Tidy ist auch Bestandteil des kostenlosen Firefox-Addons HTML Validator. Damit können Sie den Quellcode einer Website aus Firefox heraus überprüfen. Zu dem kostenlosen HTML Tiny gibt es auch kommerzielle Konkurrenzprodukte wie CSE HTML-Validator und Real Validator.
Page Valet 4.2
https://valet.webthing.com/page/
Page Valet 4 nutzt das Apache-Modul mod_validator für die Überprüfung des Markups (HTML, XHTML, MATHML, SMIL, SVG, WAP/WML doctypes, DocBook/XML). Gegenüber dem W3C-Validator verspricht Page Valet 4.2 eine bessere Performance bei der Überprüfung und vollständigen XML-Support. Vor der Überprüfung können Sie einige Einstellungen vornehmen, eine Überprüfung des Codes einer hochgeladenen Datei ist genauso wie beim W3C-Validator ebenfalls möglich. Der Quellcode der überprüften Seite wird mit angezeigt und man kann direkt aus den Fehlermeldungen heraus die markierten Stellen im Quellcode anspringen.
WDG HTML Validator
https://www.htmlhelp.com/tools/validator/
Beim WDG HTML Validator kann man ebenfalls URLs, Dateien und Quellcode per Copy&Paste checken. Die Fehlerausgabe fällt allerdings recht knapp aus, ist dafür aber sehr übersichtlich. Zu den einzelnen HTML-Elementen in der Warnausgaben gibt es Direktverlinkungen auf Infoseiten, die deren Syntax erklären. Praktisch ist der Batch-Mode, mit dem sich mehrere Websites hintereinander überprüfen lassen.
Validome
Der Validator Validome erklärt Fehler knapp aber verständlich in deutscher Sprache. Der HTML/XHTML/WML/XML-Validator bietet eine Fülle von Optionen, so kann man den Quellcode einblenden lassen (in dem die fehlerhaften Stellen farblich hervorgehoben sind) und einen Dokumentenbaum anzeigen lassen, der übersichtlich die Gliederung der Seite abbildet. Die Headerdaten lassen sich ebenfalls übersichtlich darstellen. Die Fehlermeldungen werden separat angezeigt, von jeder Meldung aus kann man direkt in den Quellcode springen. Inhalte von Attributen werden genau überprüft. Außerdem gibt es ein Forum , um Probleme mit HTML zu besprechen. Validome gibt es auch zur Installation als Sidebar für den PC.
Neben der Überprüfung des (X)HTML-Codes sollte auch darauf geachtet werden, dass die Cascading Style Sheets (CSS) einer Website in Ordnung sind. Wenig überraschend existieren also auch hierfür Online-Tools zum schnellen Check.
CSS Validation Service des W3C
Hier ist natürlich an erster Stelle auf den oben bereits erwähnten Service des W3C hinzuweisen. Beim CSS-Validator können Sie festlegen, nach welchem CSS-Standard geprüft werden soll. Der CSS Validator kann zum stationären Testen auch auf den Rechner heruntergeladen und installiert werden. Danach können Sie dieses Tool als Servlet-Tool oder als Kommandozeilen-Tool einsetzen, sofern die nötigen Systemvoraussetzungen gegeben sind.
Eine Art Rundum-Check für Websites bietet Qualidator. Dieses Online-Tool überprüft die ersten fünf Seiten einer Website kostenlos. Das reicht, um einen ersten Eindruck zu gewinnen. Überprüft wird nicht nur, ob der Code valide ist, sondern auch die Usability, die Zugänglichkeit, SEO-Tauglichkeit und die technische Qualität der Seite. Den vollen Auswertungsumfang bekommen nur registrierte Mitglieder. Der User bekommt ein Gesamtfazit angezeigt und kann danach detaillierte Informationen zu diversen Einzelaspekten abrufen.
Barrierer-freie Websites
Barrierefreies Webdesign bedeutet, Webseiten so zu gestalten, dass jedermann sie nutzen kann – also auch Menschen mit Behinderungen. Zunehmend macht es der Gesetzgeber sogar zur Auflage für Behörden-Seiten, dass sie behindertengerecht gestaltet sind. Auch die EU unterstützt dieses Vorhaben. Es gibt einige Webtools, mit denen Sie checken können, ob eine Website barrierefrei ist: wave ist ein Beispiel hierfür.
Während Sie mit HTML- und CSS-Validierungstools Ihren Webauftritt auf die Einhaltung der Vorgaben überprüfen und gegebenenfalls optimieren, gibt es auch einige Online-Tools, mit denen Sie die in Ihrem Unternehmen eingesetzten Browser darauf überprüfen können, wie schnell diese Javascript-Code ausführen. Das macht durchaus Sinn, denn wenn Sie von Berufs wegen häufig auf Seiten mit viel Javascript unterwegs sind, lohnt es sich hierfür den performantesten Browser zu benutzen. Wenn Sie selbst auf Ihrer Website viel Javascript einsetzen, macht es außerdem Sinn, dass Sie wissen, welcher Browser damit am besten zurecht kommt. Gegebenenfalls können Sie dann den Besuchern Ihrer Website einen bestimmten Browser für den Besuch Ihrer Website empfehlen.
SunSpider JavaScript Benchmark und JetStream
https://www2.webkit.org/perf/sunspider-0.9/sunspider.html
Dieser Benchmark der Webkit-Entwickler konzentriert sich ganz auf die JavaScript-Performance. Hierfür werden Tests aus verschiedenen Kategorien wie beispielsweise 3D-Leistung, Stringverarbeitung und Verschlüsselung durchgeführt. Dabei wird jeder Test fünf mal durchlaufen und daraus ein Durchschnittswert ermittelt, Sie sollten also etwas Geduld mitbringen. Jeder Anwender kann den Test durchführen, klicken Sie einfach auf “Start Now!”.
SunSpider wird aber nicht mehr weiter entwickelt. An seine Stelle trat JetStream.
Kraken
Kraken Javascript Benchmark stammt von Mozilla und testet die Javascript-Performance eines Browsers.
Octane
Mit Octane können Sie ebenfalls die Javascript-Leistung Ihres Browsers prüfen. Octane ersetzt V8 und stammt von Google.
V8
V8 ist ebenfalls ein Benchmark für die Javascript-Leistungsfähigkeit Ihres Browsers. Allerdings wurde V8 durch Octane ersetzt. Beide Benchmarks stammen von Google.
Dromaeo
Auch der Benchmark Dromaeo testet die Performance des Browsers bei Javascript. Details zu den technischen Hintergründen können Sie hier nachlesen. Dromaeo wird von Mozilla entwickelt.
Quirksmode
https://www.quirksmode.org/dom/innerhtml.html
Bei diesem Benchmark wird getestet, wie schnell ein Browser eine große Menge an Daten generiert. Dabei kommen unterschiedliche Methoden (W3C DOM und InnerHTML) zum Einsatz.
Acidtest
https://www.webstandards.org/action/acid2/ und https://www.webstandards.org/action/acid3/
Mit dem Acidtest kann man Webbrowser darauf testen, ob sie konform zu den Standards des World Wide Web Consortiums (W3C) sind. Es werden also die Rendering-Engines der Browser bei HTML und CSS getestet. Die mittlerweile dritte Generation von Acid, also Acid 3, prüft zudem die Fähigkeit der Browser, interaktive Webseiten korrekt darzustellen. Der Test richtet sich an die Browser-Hersteller, sprich an Microsoft, Mozilla.org, Opera, Goggle & Co.
Autor: Hans-Christian Dirscherl, Redakteur
Hans-Christian Dirscherl schreibt seit über 20 Jahren zu fast allen IT-Themen. Sein Fokus liegt auf der Koordination und Produktion von Nachrichten mit hohem Nutzwert sowie auf ausführlichen Tests und Ratgebern für die Bereiche Smart Home, Smart Garden und Automotive.