Ajax Basics Tutorial (5)-5.2 Validating HTML content with Firefox extensions

5.2 Using Firefox extensions to validate HTML content

Current browsers are well able to implement the standard for the DOM. As long as you create content that adheres to standard HTML or XHTML, you can almost get the support of all browsers.

But it's usually easier said than done. Unlike compiled languages such as C + + or Java, HTML does not have a compiler to translate human-readable code into machine-readable binary code, and the Web browser interprets human-readable HTML or XHTML code as an internal representation of the DOM, and appropriately displays the content on the screen.

In the the late 1990s, browser contention enabled browser developers, such as Microsoft and Netscape, to add some proprietary HTML tags to expand their market share. For this reason, plus HTML does not have a strict compiler, this leads to the emergence of a large number of non-standard web pages. The current browser, while supporting the latest consortium standards, will be as accommodating as possible to poorly written HTML pages. Depending on the doctype of the HTML page (if any), most browsers have two modes of rendering: strict (strict) and quirks (odd). When DOCTYPE indicates that a Web page should be written in accordance with one of the recommended rules for the Internet, such as HTML 4.1 or XHTML 1.0, the Web browser uses the strict mode, and when there is no doctype, or if there are many conflicts between the page and the specified DOCTYPE, The Web browser uses the quirks mode.

As a developer, you should try to create a page that adheres to some kind of standard of the web. Doing so not only makes your Web pages accessible to all modern web browsers, but also makes your day easier because browsers can create accurate DOM representations based on HTML code. If the page is poorly written, the browser may not be able to create an accurate representation of the DOM, and the page will be rendered using quirks mode. Dom is not correct, it can be difficult to access and modify through JavaScript, especially if it is not accessible in a cross-browser manner.

Because HTML doesn't have a strict compiler, how do you make sure that your HTML code follows the standards of the consortium? Fortunately, the Firefox Web browser already has several extensions that can easily validate your Web pages.

5.2.1 HTML Validator

HTML validator[1] is a Firefox extension that can find and flag errors on HTML pages. The HTML validator is based on tidy, and tidy was originally a tool that the consortium developed for validating HTML code. The HTML validator embeds the tidy tool in Firefox so that it can validate the source code of the page in the browser without having to issue the code to a third party for verification.

Tidy will look for HTML errors and classify these errors into 3 categories:

L Error (Error): Tidy problems that cannot be corrected or understood.

L Warning (warning): Tidy error that can be automatically corrected.

L Accessibility Warnings (accessibility warning): These HTML warnings correspond to 3 priorities defined by the Web Accessibility program (Web Accessibility Initiative,wai).

The HTML validator displays the status of the page and the number of errors in the lower-right corner of the browser, providing quick feedback during the development cycle (see Figure 5-2).

If you choose the View→page Source menu item to view the sources of your Web page, HTML Validator can provide more help. The Firefox view-source (View source) window opens normally, but it will also enable HTML Validator, which includes two new panes (see Figure 5-3). The HTML Errors and warnings (HTML errors and Warnings) pane lists any errors found on the page. Click on any error item in the list, and the Source Code main window will display the line of code in the HTML source code that has the problem. The Help pane describes the problem in detail and provides some suggestions for correcting the problem.

The bottom of the Firefox view-source window includes a clean up the page (cleanup pages) button. Clicking this button opens a window that will help you correct the error on the page (see Figure 5-4). When the Clean Up page window opens, the top of the window has 4 tabs: cleaned HTML (cleaned HTML), Original HTML (original HTML), cleaned Browser (after-cleaning browser), and Original Browser (the original browser).

Figure 5-3 When viewing the source code of the page, the HTML validator lists the errors in the HTML source and proposes suggestions for correcting the problem

Figure 5-4 HTML Validator Cleanup The page dialog box gives you a new source code that has fixed the error found in the original source HTML code.

Cleaned HTML tags are most useful for web developers. This tab lists the page source code that is corrected through the HTML validator. The HTML validator will automatically fix all errors on the page, and the corrected output will be listed under this tab. The Original HTML tag lists the original source code of the page, which is the form before the HTML validator processing.

Sometimes correcting HTML errors on a page can change the way browsers render pages, which may or may not be what we want. The Cleaned browser tab shows what the page will look like when the modified source code provided with HTML validator is used, and the original browser tag displays the page corresponding to the original source.

In short, HTML validator is a powerful tool that can help you clean up your HTML to conform to the standards and recommendations of the Consortium. Unfortunately, HTML validator can only be used on Windows platforms. Fortunately, there is another Firefox extension that has similar functionality to the HTML validator and can be used on all platforms.