Debugging HTML

In plain English

Your browser's developer tools, usually opened with F12, include an inspector that shows the live page. The DOM is the tree of elements the browser built from your HTML, and it is where you check where a tag actually ended up. Most HTML bugs come from unclosed or misnested tags, like an <li> sitting outside its <ul>. You can also use the inspector to check basics such as missing alt text and heading levels that skip a step.

Step by step

1. 1Press F12, or right-click an element and choose Inspect, to open the inspector.
2. 2Click an element on the page to highlight its place in the DOM tree.
3. 3Look for a tag missing its closing tag, or closed in the wrong order.
4. 4Check the heading outline and that images have alt text.
5. 5Fix the HTML, then reload the page.

<h1>My learning notes</h1>

<section>
  <h2>Today</h2>
  <ul>
    <li>Semantic HTML</li>
    <li>Lists and tables</li>
  </ul>
</section>

<section>
  <h2>Tomorrow</h2>
  <p>Practice debugging with the inspector.</p>
</section>

Common mistakes

• Forgetting a closing tag, which makes the rest of the page nest in surprising ways.
• Closing tags in the wrong order instead of last-opened-first-closed.
• Reading only the source file instead of the DOM, which is what the browser actually rendered.
• Skipping a heading level just because the next size looks nicer.