HTML Debugging: Header and Footer Are Nested Incorrectly

A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: header and footer are nested incorrectly. This guide shows you what to look for, a concrete fix, and how to check that it worked.

The Idea in Plain English

Header/footer semantics depend on surrounding sectioning elements. Place them inside the section they describe.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.

<!-- Problem -->
<header><footer>Copyright 2026</footer></header>

<!-- Corrected example -->
<article>
    <header><h2>School Update</h2></header>
    <p>New library books have arrived.</p>
    <footer>Published by the library team.</footer>
</article>

What Each Part Does

The header introduces a page or nearby section.
The footer adds closing information for its page or nearby section.
An article identifies a self-contained piece of content.

Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.

Try It Yourself

Check that each structural element belongs to a meaningful page or article region.

Common Beginner Mistakes

Check the underlying cause before changing unrelated tags.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Header/footer semantics depend on surrounding sectioning elements. Place them inside the section they describe.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.