Section 35: Validation Tools, DevTools and Debugging

Learning Objectives

Understand HTML validation.
Use browser Developer Tools to inspect pages.
Identify common markup errors.
Understand the difference between validation errors and application bugs.

1. Why Validate HTML?

HTML validation checks markup against HTML syntax and conformance requirements. It can help identify invalid attributes, incorrect nesting and other structural problems.

Valid markup is a useful goal, but it does not guarantee that a page is accessible, secure, attractive or free from application bugs.

2. Use the Nu HTML Checker

The Nu HTML Checker is a tool for checking HTML conformance. You can submit a document or check a public URL using the validator at https://validator.w3.org/nu/.

3. Common HTML Errors

<!-- Incorrect: a paragraph cannot contain another paragraph -->
<p>First paragraph
  <p>Second paragraph</p>
</p>

<!-- Correct -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Incorrect: duplicate IDs -->
<input id="email" name="email">
<input id="email" name="backup_email">

<!-- Correct -->
<input id="email" name="email">
<input id="backup-email" name="backup_email">

4. Browser Developer Tools

Most desktop browsers provide Developer Tools. Common panels include:

Elements or Inspector: inspect the DOM and CSS.
Console: inspect JavaScript errors and warnings.
Network: examine requests, status codes and loading times.
Sources or Debugger: inspect and debug JavaScript.
Accessibility tools: inspect accessible names and other accessibility information, where supported.

5. Inspect the DOM

Open Developer Tools and select the Elements panel. Inspect a heading, form field or image to see the current DOM and the styles applied to it.

Remember that the live DOM may differ from the original page source because JavaScript and browser parsing can modify the document.

6. Debug Missing Images

<img src="/images/course-banner.webp"
  alt="HTML course banner"
  width="800" height="450">

If an image fails to load, check the URL, filename capitalization, server response, file permissions, network request and content type. A 404 response often indicates that the requested resource could not be found.

7. Debug JavaScript Errors

<h1 id="heading">Original heading</h1>

<script>
  const heading = document.querySelector("#heading");

  if (heading) {
    heading.textContent = "Updated heading";
  } else {
    console.error("Heading element was not found.");
  }
</script>

Check the Console for error messages and use breakpoints when necessary. Avoid silently ignoring unexpected failures in production code.

HTML Validation & Debugging