Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

HTML flexibel überprüfen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
07:38
  Lesezeichen setzen

Transkript

Mit dem Validator des W3C validieren Sie HTML-Dokumente. Aber manchmal ist dieses "unverständlich" System nicht geeignet. Mehr Flexibilität bietet Ihnen der HTML-Inspektor, bei dem Sie angeben können, wonach er suchen soll. Wenn ich einen Framework wie beispielsweise "Vue.js" benutze, dann gebe ich dort üblicherweise auch Attribute an, wie sie so in HTML nicht vorgesehen sind. Sehen wir uns ein Beispiel an. Hier habe ich ein kleines Beispiel, in dem Vue.js eingesetzt wird. Es gibt dieses Attribut. Wenn ich das aufrufe, erhalte ich so eine To-Do-Liste. Was passiert aber, wenn ich jetzt versuche, dieses Dokument zu überprüfen beim Validator des W3C. Ich markiere einmal das ganze Dokument und kopiere das. Jetzt gehe ich zum Validator des W3C, möchte nicht die Option, dass die Adresse überprüfen möchte, ich möchte auch nicht die Datei hochladen, sondern ich kopiere das direkt rein und gehe auf "Überprüfen". Und dann bekomme ich, wie zu erwarten war, die Meldung, dass das Attribut "v-for" nicht erlaubt ist bei einem "Li"-Element. In diesem Fall weiß ich natürlich, dass es kein Fehler ist, weil das ja so geplant ist, aber trotzdem ist es natürlich umständlich, wenn ich solche Meldungen bekomme gerade bei umfangreichen Dokumenten, weil ich dann immer ausfiltern muss, welche Fehlermeldungen für mich relevant und welche nicht. Besser wäre es, ich hätte in solchen Fällen einen Validator, den ich anpassen kann. Und genau das gibt es. Das ist nämlich der HTML-Inspektor von Philip Walton. Wie funktioniert das? In der einfachsten Variante binde ich den direkt ein. Ich kann aber auch über NPM beispielsweise installieren und dann kann ich ihn starten und erhalte eine Reihe von Fehlermeldungen. Und das Interessante ist, dass ich viele Möglichkeiten habe, den genau zu konfigurieren. An dieser Stelle habe ich den HTML-Inspektor einmal eingebunden und aufgerufen. Sehen wir uns das Ergebnis an. Und wenn ich die Konsole mir anzeigen lasse, dann erhalte ich die Meldung, dass dieses Attribut nicht erlaubt ist, also das findet auch dieser Inspektor. Ich möchte ihn jetzt aber so konfigurieren, dass diese Meldung nicht mehr angezeigt wird, sondern nur auf andere Fehler überprüft wird. Dafür gibt es jetzt mehrere Möglichkeiten. Ich kann zum Beispiel Regeln angeben, die nicht angewandt werden sollen. In diesem Beispiel sage ich, ich möchte, dass die Attribute nicht überprüft werden. Und wenn ich das aufrufe, dann ist diese Fehlermeldung verschwunden. Jetzt kann es aber natürlich sein, dass ich möchte, das prinzipiell Attribute überprüft werden, aber ich möchte bestimmte Attribute ausschließen. Und das sehen Sie, wie das funktioniert, an diesem Beispiel. Ich kann die Regeln, die es gibt, erweitern. Die Regel, die ich erweitern möchte, ist diese "validate-Attributes". Und da kann ich dann sagen, dass ich eine Whitelist haben möchte mit Attributen, die nicht überprüft werden. Um zu schauen, ob das auch wirklich klappt, habe ich an dieser Stelle einmal ein Attribut geschrieben, was veraltet ist, und habe ein weiteres Attribut geschrieben, was nicht zu dieser Regel passt. Sehen wir uns das an. Dann erhalten wir ganz richtig die Meldung des "bgcolor", dass es nicht mehr gültig ist, sollte man wirklich heute nicht mehr benutzen. Und außerdem bekomme ich auch die Meldung, dass dieses Attribut "gibts", dass es da nicht gibt. Aber hingegen das Attribut, was mit "v" beginnt, wurde nicht berücksichtigt, also genau das, was ich haben wollte. Der HTML-Inspektor bietet viele Optionen zur Konfiguration, die Sie detailiert auf der GitHub-Seite aufgeführt finden. Sie können sagen, wo er beginnen soll, welche Regeln er verwenden soll, welche Regeln er nicht verwenden soll, welche Elemente nicht berücksichtigt werden sollen, welche Knoten oder Unterbäume nicht berücksichtigt werden sollen. Das ist dann die untergeordneten Elemente, der angegebenen, die nicht berücksichtigt werden. Und Sie können auch eigene Fehlermeldungen generieren lassen, also wir stimmen, wo diese angezeigt werden sollen. Stellen Sie sich die Frage, was für Regeln sind denn schon dabei. Das sind zum einen "Validation" Regeln, also Validierungsregeln sind andere Sachen, was eher in die Kategorie "best-practices" fällt oder auch so etwas wie Konventionen. Also Sie können zum einen bestimmen, dass Elemente überprüft werden. Diese "Element Location" bedeutet, dass auch überprüft wird, dass die Elemente an der richtigen Stelle stehen. Attribute können Sie überprüfen lassen. Das Tool kann schauen, ob es doppelte IDs gibt, und es kann überprüfen, ob Elemente, die nur einmal vorkommen dürfen wie "title" oder "Main", ob die auch wirklich nur einmal vorkommen. Außerdem in der Kategorie "Best Practices", da können Sie angeben, ob eben gewarnt werden soll bei "Inline Event Handlers". Außerdem kann eine Warnung ausgegeben werden, wenn Sie einen Script woanders angeben als vor dem schließenden "Body" Tag. Sie können sich warnen lassen, wenn Klassen verwendet werden, die nicht benutzt werden oder unnötige Elemente. Außerdem ist dieses Tool praktisch, wenn Sie auf eine CSS-Strategie wie "BEM" setzen, dann können Sie eben angeben, dass auch überprüft wird, ob die Klassen richtig benutzt werden und die Namen richtig vergeben werden. Zusätzlich können Sie, wie Sie es auf der Seite finden, auch eigene Regeln ganz neu definieren. Praktisch ist ebenfalls, dass Sie das Tool auch innerhalb von Grunt nutzen können. In diesem Film haben wir uns mit einem konfigurierbaren Validator beschäftigt, und Sie haben Fälle kennengelernt, in denen es praktisch ist, so einen selbst konfigurierten Validator zu benutzen, und sehr schön ist eben der HTML-Inspektor, weil er so viele Optionen bietet, nützlich beispielsweise wenn man bestimmte Attribute von der Überprüfung ausschließen möchte.