Validating XHTML5

XHTML5 is a stricter version of HTML5 where checks of the syntax and grammar are applied more rigourously.

In standard HTML5 parsing, some web browsers may be more tolerant than others when it comes to errors such as missing </p> or </li> tags. This can lead to differences in the internal DOM tree and sometimes subtle differences in behaviour and the way CSS is applied, which can be hard to debug.

Hence, it is good practice to write clean XHTML5 and to validate it, so as to catch unintended mistakes (analogous to linting source code).

1 html5.validator.nu

The web site:

html5.validator.nu

provides online validation of XHTML5.

The trick is to temporarily rename/copy your file to give it the extension .xhtml, and then choose File Upload in the dropdown menu.

Files with a .xhtml extension are subjected to strict XHTML5 validation. Files with a .html extension are parsed with very liberal error tolerance (not what we want).

A single error in your XHTML5 source code (such as a missing closing paragraph tag) can often produce a cascade of follow-up error messages. Fix the errors one at a time, starting at the top. Fixing one error often eliminates several error messages. Then validate again.

Finally, rename your file back to the extension .html. We want clean valid XHTML5 source, but we want to serve it to the browser as HTML5.

2 TotalValidator Basic 11.7.0

2.1 Installation

I really like TotalValidator Basic, but it is unfortunately no longer free. The new free version is called TotalValidator Test and only produces summary statistics, rather than a line by line error report.

For the time being, use the free version of TotalValidator Basic v 11.7.0 from 09 Oct 2017, which is archived (for Windows) at:

https://web.archive.org/web/20171124013416/http://totalvalidator.com/downloads/TotalValidatorBasic.exe

2.2 Configuring the Options

Once installed, set the validator to check for XHTML 5.2 (do not check Accessibility or CSS), then Browse to the file you want to check. The panel should look something like Figure 1. Press Validate and the results will appear in a browser window.

TotalValidator Basic v 11.7.0 Main Panel.
Figure 1: TotalValidator Basic v 11.7.0: Main panel with options set to validate XHTML 5.2.

2.3 Locate any Errors

If the HTML5 file contains validation errors the corresponding line numbers will be highlighted, as shown in Figure 2. Fix the errors one at a time, starting at the top. Fixing one error often eliminates several error messages. Then validate again.

TotalValidator Basic v 11.7.0 Issue Report
Figure 2: TotalValidator Basic v 11.7.0: An issue report. Three errors, the first of which is in line 43.

2.4 Finished

Once all validation errors have been eliminated, a screen similar to the one in Figure 3 will be shown. Done.

TotalValidator Basic v 11.7.0 Validated OK.
Figure 3: TotalValidator Basic v 11.7.0: The file has validated OK.