Debug and validate an HTML page

Inspect what the browser built

Open your saved page, right-click a heading and choose Inspect. The developer tools Elements or Inspector panel shows the browser’s current document tree and styles. This is useful when a missing closing tag or unexpected nesting makes the page look different from your source. The displayed DOM can include browser repairs or changes made by JavaScript, so compare it with the saved file when a result is surprising.

Temporary edits in developer tools let you test a change, but they do not save it to index.html. Make the real correction in your editor, save and reload. Use the Console panel for JavaScript errors; an HTML-only page may have no console messages at all.

Check the common mistakes first

If your browser displays tags as literal text, ensure the file really ends in .html rather than .txt and that you opened the saved file. If a page seems unchanged, save and refresh, then check the file path shown in the browser address bar.

If an image, stylesheet or script is missing, compare its src or href with the actual filename and folder. If the page layout is strange, check opening and closing tags and their nesting. If a link does not go where expected, inspect its href. A missing document title affects the tab, not the visible heading. Browser Console errors are especially useful when a linked script fails to load or contains invalid JavaScript.

Check the HTML source

Use the Nu HTML Checker at validator.w3.org/nu/ and choose its file upload or text input option for a local page. Read each message and its line reference, fix the source and check again. Validation can catch structural mistakes and missing required information; it cannot tell whether the wording is clear, the design is usable or every interaction is accessible.

For the example below, first open it in a browser and inspect the image. The intentionally absent image file demonstrates a path problem rather than invalid HTML. Replace photo.jpg with a real file in the same folder or change src to the correct relative path. The alt text gives a fallback description while the image is unavailable.

• Create a first HTML page
• Images and alternative text

Syntax

<img src="photo.jpg" alt="A garden path">

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image path check</title>
</head>
<body>
  <main>
    <h1>Garden notes</h1>
    <img src="photo.jpg" alt="A garden path">
    <p>Check whether photo.jpg exists beside this file.</p>
  </main>
</body>
</html>

Best practices

• Fix errors in the saved source, not only in developer tools.
• Use a validator alongside browser and accessibility testing.
• Check relative paths and the first Console error before guessing.

Browser compatibility

Related HTML documentation

Specifications & further reading

• MDN: Browser developer tools
• Chrome DevTools overview
• Nu HTML Checker