HTML Validation and Debugging

What Is It?

Debugging means finding and fixing a mistake. Start by checking the code, then check the result in the browser.

What the Tags Mean

• Opening and closing tags: must match.
• id and for: must match for a label and input.
• src and href: must point to the right file.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Validation and Debugging</title>
 
</head>
<body>
<p>This paragraph is closed correctly.</p>
<h2>This heading is outside the paragraph.</h2>
</body>
</html>

What you see: The paragraph and heading appear as separate parts of the page.

Example 2: Another Use

If clicking a label does not focus its field, check these values.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Validation and Debugging</title>
 
</head>
<body>
<label for="name">Name</label>
<input id="name" type="text">
</body>
</html>

Simple Tip

Check one problem at a time. Save, refresh, and test again. The browser Console helps with JavaScript errors.

Try It Yourself

Change the input ID, test the label, then fix it.