This page describes an easy way to validate HTML documents using CSS HTML Validator and Firefox.

CSS HTML Validator is a desktop software application for Windows that provides one-click checking of HTML, CSS, SEO, spelling, accessibility, mobility (Android/iOS), JavaScript, and links.

See also: Validating a DOM with Google Chrome.

Option 1: Easy Copy Add-on (Recommended)

The Firefox Easy Copy add-on extension by Byron (new window) can be used to quickly copy the HTML source of a web page (generated from the current state of the DOM) to the clipboard by selecting its Easy Copy->HTML Source menu option. When the document source is copied to the clipboard, CSS HTML Validator can automatically detect it, paste the clipboard text into a new document, and validate it.

Note: Unfortunately this add-on is not currently compatible with Firefox Quantum.

Steps

1. First, download and install CSS HTML Validator for Windows (a trial version will work) and Firefox for desktop (new window) if you haven't already.

2. Run CSS HTML Validator and then go to the Editor Options (Ctrl+F3) and select the Clipboard options page. Enable the option to Watch the clipboard for HTML documents. You may also want to enable other options like the Auto validate documents from the clipboard option.

   

3. TEST IT (v17+): If CSS HTML Validator is running and the option to watch the clipboard is checked, then CSS HTML Validator should automatically open a new document with the line "Success" when you copy the below line to the clipboard.

   <cseclip url="http://test.domain.com ">Success

4. Run Firefox and install the Easy Copy add-on extension by Byron (new window). Use Firefox with the add-on to copy HTML to the clipboard. See the sections below for important information and tips.

Important

• CSE HTML Validator v16 may not detect the clipboard text from Easy Copy as an HTML document because it may not contain a DOCTYPE. This problem is resolved in v17+ because it has improved HTML document detection and supports the new cseclip tag.
• The HTML source that is copied to the clipboard using Easy Copy is created from the current state of the DOM and is not the original document source that you would see using the View Page Source option. Because of how this works, the copied source may not include a DOCTYPE or the html tag (instead the source may begin with the head tag).
• If part of a page is selected then only the HTML source for the selection is copied (again, based on the DOM).

Tips

• Take advantage of the special cseclip tag in v17+ by setting the template for HTML Source to:

  <cseclip url="%page_url%">%html_source%

  The template can be changed in the Easy Copy Options dialog (Easy Copy->Options). This will allow for better recognition of HTML in the clipboard and for link checking of relative URLs (because the absolute path can be computed).

  If you're using the cseclip tag, then you may want to enable Limit to only documents starting with the special cseclip tag in the Clipboard page of the Editor Options (Ctrl+F3). Using this option can prevent CSS HTML Validator from opening unwanted clipboard text that would otherwise be recognized as a document and opened in a new tab.

• You can configure Easy Copy to add a Copy HTML Source option to the immediate right-click context menu so you have fast access to it (using Easy Copy->Options and selecting the Show In Main Menu option for HTML Source).

• You can setup a new menu item specifically for CSS HTML Validator by clicking the New button in the Easy Copy Options dialog (Easy Copy->Options). See the screenshot below.

  

Option 2: Html Validator Add-on with CSS HTML Validator Support

Unfortunately this add-on has problems with current versions of Firefox and CSS HTML Validator and no longer appears to be under development. Consider using the integrated web browser in CSS HTML Validator instead. It allows you to browse the web while validating the HTML source.

The Firefox Html Validator add-on extension by Marc Gueury (new window) supports recent versions of CSS HTML Validator (v10.02 or greater, any edition). In the Html Validator add-on's options dialog, choose CSE HTML Validator for the Algorithm (highlighted in the screen shot). View the page source to see the validation results.

Important

• Make sure the add-on version you're using is compatible with the version of Firefox you're using.
• When using CSS HTML Validator with this add-on, you may need to click on the add-on's icon to get the validation results. This improves performance by only validating when you want to see the validation results.
• As of 2015-03-23, we're aware of some issues with this add-on and the latest version of Firefox, and have contacted the add-on developer to try to resolve them:
  • A possible mismatch between the shown source and the validation results
  • The Options button for CSE HTML Validator doesn't work
  • The validation results may not always display