Validating Your Code - HTML

Validating your documents’ code is a very good idea. It helps double-check your document for simple errors—typos, unclosed tags, and so on—and also verifies that your code meets expected standards.

Specifying the correct document type definition
There are many ways to validate your documents, but they all rely on your documents containing a correct document type definition (DTD) declaration. For example, if you want to base your documents on Strict HTML 4.01, you would include the following DTD declaration at the top of your document:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

The DOCTYPE declaration informs any user agent reading the document what standard the document is based on. The information is primarily used by validation clients in validating the code within the document, but it might also be used by a display agent to determine what features it must support.

Validation tools
You can use several tools to validate your documents. Tools you have at your disposal include the following:

  • The online W3C HTML validation tool, found.
  • The online Web Design Group (WDG) validation tool, found at www.htmlhelp.com/tools/validator/.
  • Validation utilities built in to Web development tools such as Macromedia’s Dreamweaver MX.
  • Macromedia’s Dreamweaver MX includes a comprehensive code validation feature.

    Macromedia’s Dreamweaver MX includes a comprehensive code validation feature.

  • Any of the various separate applications that can be run locally. A comprehensive list is maintained on the WDG site at http://www.htmlhelp.com/links/validators.htm.

Understanding validation output
Consider the following HTML document:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”><html><head><title>Validation Test</title></head><body><form action=“” method=“POST”><input name=“text” type=“text”><br><input name=“submit” type=“submit”></form></body></html>

When this code is passed through the W3C Markup Validation Service, the following first error is returned:

Line 9, column 30: document type does not allow element“INPUT” here; missing one of “P”, “H1”, “H2”, “H3”, “H4”,“H5”, “H6”, “PRE”, “DIV”, “ADDRESS” start-tag<input name=“text” type=“text”>

Although the document looks to be conforming HTML, the validation service thinks otherwise. However, what exactly does the error mean? In short, it means that the <input> element must be contained within a block element other than the <form> tag. Typically, the paragraph tag (<p>) is used, but you can also use <div>, a heading, <pre>, and so on.

Note:The W3C also has an online CSS validation tool, accessible at: http:// jigsaw.w3.org/css-validator/. Similar to the HTML validation tool, this tool will make sure your CSS style sheet is free from typos and that all the attributes are paired with their matching styles.

Adding a paragraph container solves the problem and makes the document valid:

...<form action=“” method=“POST”><p><input name=“text” type=“text”><br><input name=“submit” type=“submit”></p></form> ...

Tip:When working on making a document validate, always handle the errors in order. The example in this section actually results in four separate errors, each relating to the missing block elements. Adding the preceding elements solves all four problems.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics