Html validator for chrome

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A Google Chrome extension for validating HTML.

License

renyard/validity

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Validity can be used to quickly validate your HTML documents from the address bar.

Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the Javascript console.

Validity also gives you the option to use your own installation of the W3C Validation Service. (For more information on installing the W3C Validation Service see the documentation at http://validator.w3.org/docs/install.html).

About

A Google Chrome extension for validating HTML.

Источник

Chrome extensions for HTML validation

Chrome extensions offer a great way to extend your browser with tools that help you in your daily job as a web developer. In this article we analyze the most popular extensions that help you with HTML validation directly from your browser.

Web Developer

This extension is a must-have for all web developers, as it offers a nice collection of tools to help you in your job: disabling JavaScript, managing cookies, tweaking CSS, forms. and also shortcuts to validate the current page on the W3C Validator.

The Web Developer extension gives you shortcuts to validate HTML (both via URL and by submitting your local HTML as text input), CSS, Feeds, Accessibility on [Wave](http://wave.webaim.org/) and check for broken links.

• Pros: Nicely integrated with other web development tools, simple interface.
• Cons: Can’t be configured, you can’t use your own validator instance or run validations automatically on certain hosts, uses legacy validator.

Validity

The Validity extension lets you validate HTML on the legacy W3C Validator, and shows the issues found on the JavaScript console, instead of opening a new tab. This sounds like a good idea if you already spend your time inside the JS console, but it only shows you the line where the issue is and the general description — no start and end lines and columns, no excerpts and no links for additional help.

It can also get a bit messy as the output is mixed with other JS warnings and logs you might have in your JS console. It would probably be more readable if the output was on a separate tab instead of in the JS console.

• Pros: Can be configured to use your own validator instance, and can validations automatically on certain hosts.
• Cons: Depends on the legacy validator, can’t use the Nu Validator directly. The output is limited and messy as it uses the JavaScript console.

HTML Validation Bookmarklet

This extension shows the HTML validation results on a nice overlay in your validated page, which is a lot nicer than having to look for the results on the console. It will include information about the line and column where it happens (although not the start and end) and, with a second click, an excerpt of the code where the trouble is.

• Pros: Nice interface, simple to use. Uses the Nu Validator.
• Cons: Can’t be configured to use your own Validator instance. The overlay can be unusable when validating a page that already uses overlays.

Other extensions. that didn’t work

We also tried other extensions that are quite popular on the Chrome web store but, at the time of this writing, don’t work:

• W3C Validator. Not an official W3C extension, it should use the legacy validator API and show the issues on the JS console, but it doesn’t work.
• HTML Validator. It doesn’t work, probably because it had an autorun option that might have caused it to be [banned](/articles/have-you-been-blocked-by-the-w3c-validator).
• Kingsquare HTML Validator. Supposed to offer an alternative way to validate HTML using the Tidy HTML library instead of the W3C Validator, it just doesn’t work.

Still checking your large sites one page at a time?

Save time using our automated web checker. Let our crawler check your web pages on the W3C Validator.

Related posts

HTML Checker upgraded to W3C Validator Nu 20.6.30

The HTML validation server has been upgraded to the latest version released of Validator.nu by the W3C, which adds some fixes and improvements related with checking CSS, SVG, and ARIA.

HTML Checker upgraded to W3C Validator Nu 20.3.16

The HTML validation server has been upgraded to version 20.3.16 of Validator.nu by the W3C, which adds some fixes and improvements related with checking CSS, SVG, and ARIA.

Recent Posts

• Advanced Crawling Options July 14, 2023
• Custom Months for Monthly Reports June 15, 2023
• Progress Report Emails May 24, 2023
• Increased Report Data Storage May 18, 2023
• Filter out tags with the ‘none’ mode May 8, 2023

Tags

Automated site validation

Rocket Validator scans your site and automatically validates up to 5,000 web pages, checking each page found with Axe-Core and W3C HTML Validator.

Источник

Html validator for chrome

We will validate a small HTML page with just an small HTML warning. (Test yourself)

sample

We will use Tidy as algorithm. If you want to use another algorithm, go to the options. (For more info, click here).

You have now 2 choices.
1. correct it yourself with the help given next to the error. Then press CTRL+R (refresh) to see if it is solved
2. Or press on the clean up button that will correct the HTML for you.

That’s it ! You can try the same with the SGML parser to be sure to have the same errors than the W3c.
The differences between the 2 algorithms is explained below.

2. Tidy vs SGML parser

• W3C Validator is based on SGML and the verification of the DTD of the page (defined in the DOCTYPE)
• HTML Tidy is called a ‘linter’, lexer. In short, it parses the page and try to understand the errors.

• Tidy shows more errors.
  — Tidy shows errors about attributes values.
  — Tidy reports useless empty tags
• Tidy has an accessibility checker of WAI level 1, 2, 3.
• Tidy has a feature to clean up a page. It is interesting to help people to find solutions for their errors.

B. OpenJade, the SGML Parser

• It is the same algorithm that the http://validator.w3.org
• So, it gives the same errors than the W3c validator. This can be important if you want or need to have your pages W3c compliants.
• It is based on DTDs: a language that defines the HTML syntax. There are a lot of SGML DTDs for ex, several types or versions of HTML, SVG or MathML, .
• It gives better result for Strict HTML or XHTML validations.

3. Validate now ( after JavaScript or AJAX execution )

4. Icons

When using the HTML Validator extension, you will encounter some icons depending of the errors in the page. Here is the list of the icons andf their meaning.

0 errors / 0 warnings

This icon appears when Tidy has found no error and no warning during the validation of the page. Your page is good this is what we should all aim for.

0 errors / x warnings

This icon appears when Tidy has found warnings: HTML errors that Tidy can correct using the cleanup. The error should be corrected and Tidy can propose you some change in you HTML code to fix it

x errors / x warnings

This icon appears when Tidy has found errors: HTML errors that Tidy can not correct using the cleanup. So, you will need to correct these errors manually before Tidy can help you to correct the warnings.

Disabled

This icon appears when the validation is disabled for one reason below:
— the extension is disabled completely in the browser.
— or when the page is not an HTML page (ex: PDF)

Not in domain list

This icon appears when the url is excluded from validation for one reason below:
— when the protocol is about: (ex: about:blank)
— or when the page is an URL defined in the exception list of URLs that should not be validated (in the Options. )
— or for some advertisements in frames (when tidy.options.validate_ads=false)

Error: The HTML contains invalid characters

This icon appears when the page contains some characters that are not defined in the character set used by the page . It appears typically in page declared as UTF8 but in reality stored in Latin1.

Without being able to read all characters of the page, the extension is not able to validate the page. Such bad characters appears like in the HTML of the page or in the Page Source. Here is a screenshot of one of them:

Html Cache is Empty

This icon appears when the HTML cache is empty . If the cache is empty, the extension is not able to get the HTML and without HTML, it is not possible to validate it .

This appears most of the time when the HTTP return code is not 200 . (ex: HTTP-404). In such case, even if the browser return HTML, Firefox does not store it in his cache. And I am not able to validate it.

Another way to have this icon is to disable the cache of Firefox in the about:config.

0 errors / 0 warnings

This icon appears when a page does not contains any errors or warnings after that a filter has been applied. And the filter hides some errors or warnings .

No validation result

This icon appears only in Firefox 1.0.4 and after. But not in Mozilla or Firefox 1.5 beta and always for a frame that has been validated as part of a page.

It seems that in such version, the validation result stored in the HTML frame is lost between the validation of frame itself and the validation of the parent page (that is always done after).

This is a bug but since it is solved in Firefox 1.5 beta, I do not worry to much about it. In such case, you can anyway see the validation by going to the view source.

5. Customize toolbar. How to change the place of the icon ?

Since version 0.952, you can change the place of the validation icon in Firefox.
Click on any toolbar and choose Customize.

After this, Firefox will go in a special mode where you can drag and drop the validation icon.
The icon can be placed in any toolbar.

In the navigation bar, when the icon is shown with text, the text will have another smaller format. See screenshots.

Источник