Validating HTML

Some folks really like web development more than traditional kinds of software development. The web is very visual. You can put what you make in the hands of real human users quickly and cheaply. You just share a link. No extra downloads or installations are required. Every generation desires its own culture, music, and literature, and this probably applies to technology too. The software stack used in web development feels fresh and hip compared to C and Java. Perhaps the most compelling reason is that the browser is far more forgiving than a compiler. You can feed it trash HTML, and the content will often still display.

For the sake of your career, you should eventually stop writing trash HTML. To determine if your HTML is trash or if it follows the specification, run it through the Nu validator provided by the World Wide Web Consortium (W3C). Open the validator in a separate tab or window, choose the text input mode, and paste in this HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Finders Keepers</title>
  <link rel="icon" href="/images/crescent.svg">
  <meta charset="utf-8">
  <meta name="description" content="We find things, and we keep them.">
</head>

<body>&hellip;</body>

</html>

Validate the document. You find one warning: the document lacks a lang attribute on the root element. From now own, you know to declare your document's language. If your document is in English, you'd write this:

<html lang="en">

Fix this and revalidate. There should be no errors or warnings left. You have a document that complies with web standards.

Tweak the HTML in the following ways, revalidating after each step and reflecting upon the results:

Remove the </html> tag.
Remove the </body> tag.
Remove the <head> and </head> tags, but not the elements between them.

Yikes. None of these changes cause the document to become invalid. The HTML specification is very forgiving indeed.

Try removing the DOCTYPE line. Does the page validate?

Try validating this document, which contains multiple head and body elements:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>...</title>
</head>

<head></head>

<body></body>

<body></body>

</html>

Thank goodness this duplication is invalid.

Suppose you omit an angle bracket. Does this document validate?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Missing Greater</title>
</head>
<body>

  <img src="map.png" alt="map to the buried treasure" 
  
</body>
</html>

The missing angle bracket generates a cascade of spurious errors.

Suppose you forgot to put a closing tag on a normal (non-void) element. Does this unordered list validate?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Unclosed List</title>
</head>
<body>

  <ul>

</body>
</html>

Suppose you try to add some images as immediate children to this unordered list. Does this validate?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>List Begets Image</title>
</head>
<body>
  
  <ul>
    <img src="animated-bullet.gif">
  </ul>
  
</body>
</html>

The validator tells you that the image element is out of place. Only list items are legal children of lists. You also learn that your image element is lacking an alt attribute. This is an error rather than a warning.

Earlier you read about adding an id attribute to uniquely identify an element. What happens if two elements have the same identifier? Does this HTML validate?

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Duplicate ID</title>
</head>

<body>
  <input id="answer" type="text">
  <input id="answer" type="number">
</body>

</html>

Make validating your HTML part of your workflow. Even though invalid HTML documents may still render correctly on your browser at the present moment, you have other browsers and the future to worry about.