Recommended Free Tools
A custom 404 page can explain what went wrong and give visitors a useful way back—but the design alone does not make a URL return the correct HTTP status. This guide includes a copy-ready HTML/CSS template, explains how to connect it on GitHub Pages or Apache, and shows what to check before you treat a 404 as a design problem.
What a 404 page should do
HTTP 404 means the server cannot find the requested resource. It does not, by itself, mean the page has been permanently removed. For content that has been permanently removed, MDN identifies HTTP 410 Gone as the distinct status: MDN’s 404 reference.
As an Amazon Associate I earn from qualifying purchases.
A useful error page states plainly that the requested page could not be found, then offers a recovery route. A home link is a sensible minimum; site search or links to relevant sections can help too. A joke or distinctive visual style is fine as long as it does not obscure the explanation. MDN puts it this way: “Feel free to make your 404 page humorous and human, but don’t confuse your visitors as to why they are seeing something unexpected.”
Copy-paste 404 template: plain HTML and CSS
This starter uses no JavaScript, framework, images, or external fonts. Save it as an HTML file, then change the site name, colors, text, and home URL to fit your site. The home link is the recovery route; add a search form or useful section links if your site supports them.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page not found | Example Site</title>
<style>
:root {
color-scheme: light;
font-family: system-ui, sans-serif;
color: #172033;
background: #f5f7fb;
}
* { box-sizing: border-box; }
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
padding: 1.5rem;
}
main {
width: min(100%, 42rem);
padding: clamp(1.5rem, 5vw, 3rem);
border: 1px solid #d9e0ec;
border-radius: 1rem;
background: #fff;
text-align: center;
}
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 7vw, 3.5rem); }
p { line-height: 1.6; }
a {
display: inline-block;
margin-top: 1rem;
padding: .75rem 1rem;
border-radius: .5rem;
background: #174ea6;
color: #fff;
text-decoration: none;
}
a:hover { background: #103c82; }
a:focus-visible { outline: 3px solid #f0a500; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<p>404 — Page not found</p>
<h1>We can’t find that page.</h1>
<p>The address may be incorrect, or the page may have moved.</p>
<a href="/">Go to the homepage</a>
</main>
</body>
</html>The markup provides a heading, readable explanation, and keyboard-visible focus style for its link. Review colors and layout against your own accessibility requirements, and test on narrow screens and with a keyboard; a code sample is not a substitute for checking the deployed page.
Choose a template style without mistaking a demo for a deployable page
Template collections surface a wide range of ideas, including terminal, pixel-art, dark, space, cartoon, brutalist, luxury, and glass-inspired designs. GitHub’s error-page-template topic is a discovery index, not a verified or licensed catalog. It does not establish that a given entry works, is accessible, or can be reused under your terms.
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
- Check dependencies: determine whether the page is standalone HTML/CSS or relies on JavaScript, a framework, fonts, images, or other assets.
- Check recovery behavior: confirm that links, search, and navigation point to real destinations on your site.
- Check responsive and accessible behavior: test the actual page for keyboard access, legible contrast, mobile layout, and reduced-motion handling where animation is used. Do not infer these qualities from a screenshot.
- Check reuse terms: read the project’s license and confirm that its assets are included and permitted for your intended use.
- Check the HTTP response: verify that an unknown URL returns status 404, not a normal 200 response displaying error-page text.
Connect the page to your platform or server
A custom page is only the presentation layer. The hosting platform or server must route missing URLs to it while returning the appropriate error status. The configuration depends on where the site is published.
GitHub Pages
- Put a file named
404.htmlin the publishing source for the site. - Alternatively, create
404.mdwith YAML front matter settingpermalink: /404.html. - Commit the file to the repository’s publishing source. Follow GitHub’s custom 404 instructions for the current publishing setup.
- After deployment, request a URL that does not exist and check that the custom page appears and the response is still 404.
Apache
MDN’s Apache example maps the error to a local page with an .htaccess directive:
ErrorDocument 404 /notfound.htmlPlace the target page at the corresponding local path and ensure the server can serve it. See MDN’s 404 reference for the example and context.
Other servers and application frameworks
HttpErrorPages is a project option for generating error pages and adapting them to deployments. Its documentation describes static output and examples involving Nginx, Apache HTTPD, Lighttpd, Express, Koa, and Caddy, with customization through templates and language definitions. Treat it as a starting point, not a universal install: check its current requirements and configure the relevant server or application integration for your environment.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.If GitHub Pages shows a 404 unexpectedly
Do not assume the error is caused by the appearance of the page. GitHub’s troubleshooting guide identifies several possible causes to inspect, including platform status, DNS, browser cache, the location and capitalization of index.html, publishing-source contents, custom-domain configuration, and repository or publishing conditions. Work through GitHub’s troubleshooting steps to distinguish a site-wide publishing problem from a single missing route.
Quick Recap
Best Value
Before you publish
- Use an explicit message that the requested page was not found.
- Make the primary recovery link work from the location where the error page is served; adapt root-relative paths if your site is published under a project subpath.
- Copy every required asset and verify all links and scripts on the deployed site.
- Test an actually missing URL and confirm both the visible page and HTTP status code.
- For removed content, decide whether it is truly permanent rather than treating every missing URL as equivalent.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
