A useful 404 page needs a 404 response

A 404 response means the server cannot find a representation for the requested resource. A useful custom 404 page explains that and offers routes back to relevant content. Its appearance alone does not establish the HTTP status.

Provide a recovery path

<main>
  <h1>Page not found</h1>
  <p>This address does not point to a lesson.</p>
  <a href="#topics">Browse the available topics</a>
  <section id="topics">
    <h2>Topics</h2>
    <ul>
      <li>HTML structure</li>
      <li>CSS layout</li>
    </ul>
  </section>
</main>

main {
  max-width: 35rem;
}
a {
  display: inline-block;
  padding-block: 0.7rem;
}

This isolated document demonstrates the message and link, not a server response. On a real site, offer search and links to the main indexes. Avoid blaming the reader or automatically redirecting every missing address to the homepage.

Verify the response

Request a deliberately nonexistent route, then inspect the main document in the browser’s Network panel. It should return 404 with your useful page body. Serving “Page not found” with status 200 can create a soft 404: the content says the page is missing while the response claims success.

When a page has moved, use a relevant redirect instead. Test hosting rules separately from the local HTML build. This site’s 404 page provides recovery links; deployment must still be checked to confirm the real missing-route response.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.