		@@ -0,4 +1,8 @@
		### 0.8.2 (January 30, 2015)

		* Fix an issue where the CLI doesn't work on windows.

		### 0.8.1 (May 30, 2014)

		* Update Suit CSS URL.
		* Update SUIT CSS URL.

		@@ -81,2 +85,2 @@ ### 0.8.0 (February 7, 2014)

		* First public release.
		* First public release.

FAQs.md

		@@ -26,3 +26,3 @@ # FAQs

		#### HTML Inspector warns me about using classes not found in any stylesheet, but those classes are in my stylesheets. What's going on?
		#### Why does HTML Inspector warn me about unused classes when those classes are found in my stylesheets?

		@@ -87,3 +87,3 @@ HTML Inspector creates its list of classes by looping through the `document.styleSheets` object. For most situations this works just fine, but if you have stylesheets loaded from a different domain, or you're using the `file:` protocol, most browsers report those stylesheets as empty.
		script.type = 'text/javascript';
		script.src = 'http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.0/html-inspector.js';
		script.src = 'http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js';
		script.onload = function(){
		@@ -90,0 +90,0 @@ w.HTMLInspector.inspect();

package.json

		{
		"name": "html-inspector",
		"title": "HTML Inspector",
		"version": "0.8.1",
		"version": "0.8.2",
		"description": "HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.",
		@@ -23,8 +23,11 @@ "license": "MIT",
		"dependencies": {
		"commander": "*",
		"colors": "*",
		"shelljs": "*"
		"commander": "^2.6.0",
		"shelljs": "^0.3.0"
		},
		"devDependencies": {
		"chai": "*",
		"dom-utils": "*",
		"grunt": "*",
		"grunt-cli": "~0.1.13",
		"grunt-contrib-concat": "*",
		@@ -37,11 +40,8 @@ "grunt-contrib-uglify": "*",
		"grunt-mocha-cli": "*",
		"chai": "*",
		"mocha": "*",
		"sinon": "1.7.3",
		"moment": "*",
		"mout": "*",
		"dom-utils": "*",
		"semver": "*",
		"moment": "*",
		"grunt-cli": "~0.1.13"
		"sinon": "1.7.3"
		}
		}

README.md

		@@ -27,6 +27,6 @@ # HTML Inspector
		```html
		<script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.0/html-inspector.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js"></script>
		```

		It can also be install via [NPM](https://npmjs.org/) or [Bower](https://github.com/bower/bower):
		It can also be installed via [NPM](https://npmjs.org/) or [Bower](https://github.com/bower/bower):

		@@ -61,3 +61,3 @@ ```sh

		Make sure you call `inspect` after any other DOM altering scripts have finished running or those alterations won't get inspected.
		Make sure you call `inspect` after any other DOM-altering scripts have finished running or those alterations won't get inspected.

		@@ -109,3 +109,3 @@ ## Configuring HTML Inspector

		For convenience, some of the config options may be passed as single arguments. If `.inspect()` receives an argument that is an array it is assume to be the `useRules` option, if it's an string or DOM element it's assumed to be the `domRoot` option, and if its a function it's assumed to be the `onComplete` callback.
		For convenience, some of the config options may be passed as single arguments. If `.inspect()` receives an argument that is an array, it is assumed to be the `useRules` option; if it's a string or DOM element, it's assumed to be the `domRoot` option; and if it's a function, it's assumed to be the `onComplete` callback.

		@@ -129,7 +129,7 @@ ```js

		HTML Inspector ships with a set of built-in rules which fall into one of three main categories: validation, best-practices, and convention.
		HTML Inspector ships with a set of built-in rules that fall into one of three main categories: validation, best-practices, and convention.

		Each rule is registered via a unique string identifier that can be used to include or exclude it at inspection time.

		Here is the full list of built in rules by their identifiers:
		Here is the full list of built-in rules by their identifiers:

		@@ -160,11 +160,11 @@ ```sh

		As a result HTML Inspector should not be seen as a replacement for validation. It's simply another tool in the toolbox. That being said, there is still a lot that it can do (and does) to validate your markup.
		As a result HTML Inspector should not be seen as a replacement for validation.; it's simply another tool in the toolbox. That being said, there is still a lot that it can do (and does) to validate your markup.

		Here are the validation rules that ship with HTML Inspector. (Expect this list to get more comprehensive in the future.)

		- Validate Elements: Inspect each element in the DOM and reports any elements that are invalid or obsolete. This will catch simple things like misspelled tags (`<il>` instead of `<li>`), and it will inform you of deprecated tags (like `<center>`, `<font>`, and more recently `<hgroup>`). Any element you don't want to be warned about can be whitelisted.
		- Validate Elements: Inspects each element in the DOM and reports any elements that are invalid or obsolete. This will catch simple things like misspelled tags (`<il>` instead of `<li>`), and it will inform you of deprecated tags (like `<center>`, `<font>`, and more recently `<hgroup>`). Any element you don't want to be warned about can be whitelisted.

		- Validate Element Location: Make sure that elements don't appear as children of parents they're not allowed to descend from. An example of this is a block element like `<div>` appearing as the child of an inline elements like `<span>`.
		- Validate Element Location: Make sure that elements don't appear as children of parents they're not allowed to descend from. An example of this is a block element like `<div>` appearing as the child of an inline element like `<span>`.

		- Validate Attributes: Like validating elements, this rule will let you know if you're using attributes that don't belong on a particular element or perhaps don't belong on any element. If your project uses custom attributes (like `ng-*` in AngularJS) they can be whitelisted.
		- Validate Attributes: Like validating elements, this rule will let you know if you're using attributes that don't belong on a particular element or perhaps don't belong on any element. If your project uses custom attributes (like `ng-*` in AngularJS), these can be whitelisted.

		@@ -177,7 +177,7 @@ - Duplicate IDs: Warn if non-unique IDs are found on the same page.

		Some markup may be perfectly valid but use practices that are commonly considered to be poor or outdated. The following rules check for these types of things. (Note that everything in this list is subjective and optional.)
		Some markup may be perfectly valid but uses practices that are commonly considered to be poor or outdated. The following rules check for these types of things. (Note that everything in this list is subjective and optional.)

		- Inline Event Handlers: Warn if inline event handlers, like `onclick="return false"` are found in the document. Inline event handlers are hard to manage, hard to debug, and completely non-reusable.

		- Script Placement: Warn if script elements appear anywhere other than right before the closing `</body>` tag. Because JavaScript is blocking, adding `<script>` elements anywhere other than the end of the document may delay the loading of the page. If a script must appear somewhere other than the end of the document, it can be whitelisted.
		- Script Placement: Warn if `<script>` elements appear anywhere other than right before the closing `</body>` tag. Because JavaScript is a blocking resource, adding `<script>` elements anywhere other than the end of the document may delay the loading of the page. If a script must appear somewhere other than the end of the document, it can be whitelisted.

		@@ -188,11 +188,11 @@ - Unused Classes: Sometimes you'll remove a CSS rule from your stylesheet but forget to remove the class from the HTML. The "unused-classes" rule compares all the class selectors in the CSS to the classes in the HTML and reports any that aren't being used.

		- Unnecessary Elements: Anytime you have a plain `<div>` or `<span>` element in the HTML with no class, ID or any other attribute, it's probably unnecessary or a mark of poor design.
		- Unnecessary Elements: Anytime you have a plain `<div>` or `<span>` element in the HTML with no class, ID, or any other attribute, it's probably unnecessary or a mark of poor design.

		Elements with no semantic meaning should only be used for presentation. If the element has no attributes but is used for styling, it must be done through a rule like `.some-class > div { }` which is just asking for trouble. Again, more information can be found [here](http://philipwalton.com/articles/css-architecture/).
		Elements with no semantic meaning should only be used for presentation. If the element has no attributes but is used for styling, it must be done through a rule like `.some-class > div { }`, which is just asking for trouble. Again, more information can be found [here](http://philipwalton.com/articles/css-architecture/).

		### Convention

		The real power of HTML Inspector lies in its ability to enforce your team's chosen conventions. If you've decided that all groups of links should be contained in a `<nav>` element, or all `<section>` elements must contain a heading, you can write those rules, and an error will be thrown when someone breaks them.
		The real power of HTML Inspector lies in its ability to enforce your team's chosen conventions. If you've decided that all groups of links should be contained in a `<nav>` element, or all `<section>` elements must contain a heading, you can write those rules and an error will be thrown when someone breaks them.

		Because convention is usually specific to individual teams, there's only one built-in rule in this category, but hopefully it'll get you thinking about rules your team could use.
		Because conventions are usually specific to individual teams, there's only one built-in rule in this category, but hopefully it'll get you thinking about rules your team could use.

		@@ -230,3 +230,3 @@ - BEM: The increasingly popular [BEM](http://bem.info/) (block, element, modifier) methodology is a CSS naming convention that is very helpful for large projects. The problem is that using it correctly in the CSS is only half the battle. If it's not used correctly in the HTML it doesn't work either.

		Here is a an example of binding a function to the "class" event:
		Here is an example of binding a function to the "class" event:

		@@ -233,0 +233,0 @@ ```js

src/modules/validation.js

		@@ -458,3 +458,3 @@ var foundIn = require("../utils/string-matcher")
		// ============================================================
		// Element categories and the elements tht are in those
		// Element categories and the elements that are in those
		// categories. Elements may be in more than one category
		@@ -461,0 +461,0 @@ //

.npmignore

Sorry, the diff of this file is not supported yet

bin/html-inspector

Sorry, the diff of this file is not supported yet

html-inspector.js

Sorry, the diff of this file is too big to display

html-inspector - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes