HTML Validation

Understanding HTML Validation

HTML validation checks markup against the rules and requirements of HTML and can help identify errors that may otherwise be difficult to notice.

A webpage can appear to work even when its source contains mistakes. Validation provides another way to inspect the document and find malformed markup, incorrect nesting, duplicate identifiers, missing required values, and other potential problems.

What Is HTML Validation?

HTML validation is the process of checking a document for markup that does not follow the rules defined for HTML.

A validator examines the HTML source and reports problems such as elements in invalid locations, incorrect attributes, duplicate IDs, malformed markup, and other structural errors.

Validation is especially useful because browsers are designed to recover from many HTML mistakes. A browser may silently repair or reinterpret invalid markup instead of showing an obvious error.

Why Validate HTML?

Validating HTML can reveal mistakes before they become harder to troubleshoot or are repeated throughout a website.

• Find typing and markup errors.
• Detect incorrect element nesting.
• Identify invalid or misplaced attributes.
• Find duplicate ID values.
• Catch malformed document structure.
• Reduce unexpected browser behavior caused by invalid markup.
• Improve the overall quality and maintainability of the source code.

Validation does not guarantee that a page is accessible, attractive, secure, or correct in every browser, but it is an important part of checking the technical quality of the HTML.

Using an HTML Validator

An HTML validator can check markup from a public webpage, an uploaded file, or HTML entered directly into the validator.

The Nu HTML Checker is commonly used to check modern HTML documents. After processing the source, it reports errors, warnings, and informational messages that can help locate potential problems.

When validating a webpage during development, it is often useful to correct the first few errors and validate again rather than trying to fix every reported message at once. One markup error can sometimes cause several additional messages later in the document.

Validation Errors

An error indicates markup that does not conform to the HTML requirements being checked by the validator.

For example, an element may appear where it is not permitted.

<p>
  Paragraph text.
  <div>Content</div>
</p>

A div element cannot be nested inside a p element in this way. The browser may automatically close the paragraph before the div, producing a document structure different from what the source appears to show.

Warnings and Information Messages

Validators may also display warnings or informational messages. These do not necessarily mean the document is invalid, but they may identify something worth reviewing.

A warning can point out markup that is technically allowed but may have limitations, compatibility concerns, accessibility implications, or a better modern alternative.

Do not automatically ignore warnings, but do not assume every warning requires a code change either. Read the message and determine whether it applies to the page you are building.

Incorrect Element Nesting

Elements must be nested according to HTML content rules. Closing tags should also occur in an order that matches the structure of the opened elements.

The following markup is incorrectly nested:

<p><strong>Important text.</p></strong>

The elements should close in the reverse order in which they were opened.

<p><strong>Important text.</strong></p>

Indentation can make these relationships easier to see, but validation can identify nesting problems that are easy to miss during normal editing.

Missing or Incorrect Closing Tags

Some HTML elements require closing tags while others are void elements and must not have closing tags.

<section>
  <h2>About Us</h2>
  <p>Information about our company.</p>
</section>

Forgetting a required closing tag can change how later content is interpreted by the browser.

Void elements such as img, br, hr, input, and meta do not use closing tags in HTML.

<img src="/img/photo.jpg" alt="HTML image example">

Invalid Attributes and Values

A validator can identify attributes that are not permitted on a particular element or values that do not meet the requirements for that attribute.

<p href="/about.html">About Us</p>

The href attribute is not valid on a p element. A link should use the appropriate a element.

<p><a href="/about.html">About Us</a></p>

Validation is particularly useful when an attribute name has been mistyped because browsers may simply ignore an unrecognized attribute without making the mistake obvious.

Duplicate IDs

An ID value should uniquely identify one element within a document. Reusing the same ID can create problems for fragment links, CSS selectors, JavaScript, labels, and accessibility relationships.

<section id="contact">...</section>

<section id="contact">...</section>

A validator can identify duplicate ID values so each element can be given an appropriate unique identifier.

<section id="contact">...</section>

<section id="location">...</section>

Validation Does Not Catch Everything

A document can pass HTML validation and still contain problems. Validation checks markup rules, not every aspect of webpage quality.

For example, validation cannot determine whether written content is accurate, whether a page is visually appealing, whether navigation is easy to understand, or whether every accessibility requirement has been satisfied.

The following markup can be valid HTML while still providing poor alternative text:

<img src="/img/product.jpg" alt="image">

The validator can confirm that the alt attribute exists, but it cannot reliably determine whether the text properly communicates the purpose of the image.

Validation should therefore be used together with browser testing, accessibility testing, code review, performance checks, and other quality-control methods.

A Practical Validation Workflow

Validation is most useful when it becomes a regular part of development rather than something performed only after an entire website has been completed.

1. Write and test the HTML in the browser.
2. Validate the document.
3. Start with the earliest reported error.
4. Correct the markup and validate again.
5. Review warnings and informational messages.
6. Test the corrected page again in the browser.

Correcting the earliest error first is useful because one malformed element can sometimes cause several later validation messages. Fixing the original problem may make some of the remaining messages disappear automatically.

Common Validation Mistakes

Best Practices

• Validate HTML regularly during development.
• Correct errors before treating warnings as the highest priority.
• Start with the earliest error because one problem can cause several later messages.
• Check element nesting carefully.
• Use attributes only where they are permitted.
• Keep ID values unique within each document.
• Do not assume that a page is error-free simply because it looks correct in a browser.
• Do not treat validation as a substitute for accessibility or browser testing.
• Understand a validation message before changing the markup.
• Validate again after correcting errors.

Summary

HTML validation helps identify structural and syntax problems that browsers may otherwise silently repair or ignore. It can detect incorrect nesting, invalid attributes, duplicate IDs, malformed markup, and many other errors that are difficult to spot by looking only at the rendered webpage.

Validation is one part of a larger testing process and should be used together with browser, accessibility, performance, and functional testing. Next, we will look at Browser Compatibility and how to make sure important website features work across the browsers your visitors use.