They’re also regularly updated to the latest published version of the HTML specification (currently 5.1), so, if nothing else, using HTML Inspector will keep you apprised of newly deprecated elements or attributes. And if your organization has many agreed-upon conventions, HTML Inspector rules will help interns and new hires learn those conventions and prevent them from debasing your code.įinally, even if you’re not interested in customizing HTML Inspector or writing your own rules, the built-in validations are a great sanity check and can help prevent common mistakes. Writing markup with a consistent style across a large team is not easy. And it only reports the errors you want to know about, so it won’t clutter your logs with unnecessary information. Since HTML Inspector is only intended to run in development and test environments, it won’t add weight to your production code. The best reason to use HTML Inspector is that it can’t hurt it can only help. This is particularly important these days as much of the HTML on the Web has been altered by jQuery plugins or client-side templating engines. The benefit of running on live DOM is you get to run your tests after the browser has parsed the HTML and after any JavaScript has altered it. If you want to enforce your conventions or markup style with a test, the W3C validator isn’t for you.įinally, the W3C validator parses static markup while HTML inspector runs on live DOM in the browser. It allows for testing HTML against the specification and nothing more. Moreover, the W3C validator cannot be extended. With the W3C validator, that’s just not possible.
Maybe you’re intentionally writing invalid markup, or maybe you only want the build to go red for particular errors. The W3C validator is uncompromisingly strict, and none of its warnings can be customized or surpressed. Though they may seem similar, HTML Inpsector and the W3C validator are actually completely different tools. How is HTML Inspector different than the W3C Validator? You can choose what rules to run, what options they’re run with, and how the errors are reported. If you disagree with any of the warnings you see or want to log the errors somewhere other than the console, remember that everything in HTML Inspector is customizable. Here’s some sample output from a test I put together: To add HTML Inspector to a page and run it with the default rules and configurations, just add the following lines right before the closing tag, and check out the warnings in the console: HTMLInspector.inspect()
HTML Inspector’s only dependency is jQuery, so if you’re not already loading that, you’ll need to.
HTML INSPECTOR W3 DOWNLOAD
Simply download the latest build and add it to the bottom of one of your pages. The best way to see how HTML Inspector works is to watch it in action. HTML Inspector comes with a set of built-in rules, but if you need more, you can easily write your own. The HTML Inspector rules can then listen for those events, test for certain conditions, and report errors when something unexpected is found. HTML Inspector traverses the DOM and emits events as it goes.
HTML INSPECTOR W3 HOW TO
If you want to go deeper and learn more about configuring HTML Inspector or how to write your own rules, please check out the source on Github. This article gives a brief overview of how HTML Inspector works and why someone would want to use it. It’s also extensible and pluggable, making it possible to write your own rules that enforce your chosen conventions. Like JSHint and CSSLint, HTML Inspector is completely customizable, so you can use what you like and ignore what you don’t.
It’s written in JavaScript and runs in the browser, so testing your HTML has never been easier.
HTML INSPECTOR W3 CODE
HTML Inspector is a code quality tool to help you and your team write better markup.
0 kommentar(er)
