A useful 404 isn't apologetic — it helps the user find what they were looking for. Include a search box, links back to popular pages, and a clear "Go home" CTA.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 — Page not found · Example</title>
<meta name="robots" content="noindex"> <!-- don't index error pages -->
</head>
<body>
<main class="error-page">
<p class="error-code" aria-hidden="true">404</p>
<h1>This page doesn\'t exist (or no longer does)</h1>
<p>Sorry — the page you wanted isn\'t here. Try one of the links below,
or search for something specific.</p>
<form role="search" action="/search" class="error-search">
<label for="search-q" class="visually-hidden">Search</label>
<input type="search" id="search-q" name="q" placeholder="What were you looking for?">
<button type="submit">Search</button>
</form>
<h2>Popular pages</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/snippets">Snippets community</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/contact">Contact support</a></li>
</ul>
<p><a class="btn btn-primary" href="/">← Go to homepage</a></p>
</main>
</body>
</html>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.