404 Page
404 页面
Aliases:404 页面找不到页面页面不存在页面打不开链接点进去空的迷路页死链页
What is it
A fallback screen for missing addresses. It explains the situation plainly and offers home, search or recommended links for a next step.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- A requested path is missing or retired
- A user types or follows a broken link
- Deleted content must still catch old traffic
✕ When not to use
- Backend failures — use a server error page instead
- Authentication or permission gaps — route to login instead
- Old links that can redirect precisely — just forward them
Variants
Minimal
极简提示
Just the code, one line of copy and a way back
With Search
带搜索
A search box and popular links so users can find their own target
Illustrated
插图引导
An illustration and recommendations soften the dead end
Page structure
- 01
Code and heading
A 404 with a plain-language heading so users know nothing crashed.
- 02
Message
One sentence explaining the missing address, free of jargon or blame.
- 03
Illustration
A light illustration or icon that softens the failure without dominating.
- 04
Actions
A primary home button and secondary back or support links.
- 05
Recommendations
A search box or popular links that point to a next step, not a dead end.
Implementation
flexgridmin-height: 100vhtext-align: centermax-width: 48chCenter the page with min-height 100vh plus flex, and cap the copy at 48ch for readability. Use a large font-serif status code as the visual anchor, with search and links inside the same max-width container. Return a real 404 status code rather than a 200 wrapper so search engines do not index empty pages.
Related concepts
A screen for backend failures. It states that the problem is server-side, offers retry or support, and preserves input to keep trust.
PagesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsContainsA horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsContainsWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUses pattern