Staff Handbook: Tasks : Checking the Syntax of an HTML file

iCab | BBedit | BB Tidy | Tidy for Unix | The Most Common Errors

iCab

iCab (http://www.icab.de/) is a web browser in development for MacOS 8.6 or higher. It aspires to support many current and upcoming standards for web browser, and includes a built-in validator to help authors understand when their pages do not conform to the HTML standard.

To use iCab to check the syntax of a web page, simply open the page for viewing as you would with any other file or URL. Here's a sample web page as viewed using iCab:

iCab screen shot

Note the purple unhappy face ( iCab error icon ). If the page didn't contain any syntax errors, a happy face ( iCab valid icon ) would be displayed. If the page did not contained errors but contained any warnings, a cautious face ( iCab warning icon ) would be displayed.

When you click on the unhappy face, an error report like the following is displayed:

iCab error icon

The line numbers on the left correspond to the line in the HTML document as it was transferred by the web server. If your web page uses server side includes, view the source of the document from within iCab by double-clicking on the line number.

If you're fixing the errors with BBedit, you'll want to turn on line numbering, so that you can find the errors reported by BBedit. To do so, click on the third icon from the left (icon to click in BBedit document window) at the top of the document window. Use the same icon to make sure soft wrapping of the text is off. The window will look soemthing like the image below.

example of line numbers in BBedit

For simpler pages, the process is now as simple as matching up the line numbers reported by iCab with the line numbers in BBedit. If you've used server side includes in your pages, the line numbers displayed won't always match up with the line numbers reported in iCab's error report. In those cases, view the source from within iCab (see above), then figure out where the error is relative to the code you're looking at in BBedit.

BBedit

BBEdit also has a built-in syntax checker. To validate an HTML document using BBedit, click the "Check Syntax" button on the HTML Tools Palette.

The window below is an example of the syntax checker. The number of errors are at the top of the window and each error is listed in the top half window. If you click on the error it will come up in the lower part of the window highlighted.

BBEdit HTML syntax error report

BB Tidy

HTML Tidy is a utility that cleans up and indents HTML code. You can start BB Tidy by selecting the "Tidy HTML" option from under the "Tools" menu in BBedit. (If you don't see the "Tidy HTML" option, this means that BB Tidy is not installed.) Once you've selected the Tidy HTML option, you should see the dialog below.
BB Tidy configuration dialog
The recommended options are highlighted, if you'd like, you can set them the way pictured, then click "Make Default" so that those options will always be used. Click "Use Now" to let BB Tidy do its work. A report of the errors, warnings, and messages will come up, it should look something like the following.
BB Tidy status report
If you have serious errors that you haven't resolved using either iCab or BBedit, BB Tidy will refuse to continue until you go back and fix the errors. Otherwise, the errors reported are generally quite simple to fix. Simple errors like omitting closing tags for paragraphs, table cells, table rows, or list elements will all be taken care of automatically. The code will also be indented and hard wrapped. This will make the code much easier to read for the next person who has to make changes, and will save you the trouble of hard wrapping and indenting your code by hand (although it's still good practice to do so).

Tidy for Unix

The UNIX version of Tidy is installed on both of our production servers (as of 9/10/2001). This works very much like BBTidy, only without any configuration dialog boxes. For usage information, try the command "bbtidy -h" on whichever machine you're connected to.

The Most Common Errors and Warnings

The table below gives you an idea of why we use all three of these syntax checkers, each detects problems the others don't. If you've read through the sections of the staff handbook on HTML and marking up an ejournal, more than a few of these should be familiar.
Description of Error Detected By
iCab BBedit BB Tidy
The !DOCTYPE is missing, invalid, or not appropriate to the tags used X X X
Optional closing tags (</p>, </li>) are missing   X X
Tags are not nested properly X X X
There are illegal characters   X X
There are images without alt attributes   X X
<center> tags are used in HTML 4.0 or greater X    
<font> tags are used in HTML 4.0 or greater X   X
There are tables without summary attributes     X
There are non-standard or deprecated tag attributes (hspace, etc.) used X X