404 Page

A 404 page template provides a user-friendly error page when users navigate to a URL that does not exist or cannot be found on your website.

Overview

The 404 page template helps users recover when they encounter a broken link or mistyped URL. Rather than displaying a generic server error, a well-designed 404 page maintains your site's branding and provides helpful navigation options to guide users back to valid content.

This template ensures that even error states contribute to a positive user experience by acknowledging the problem, explaining what may have happened, and offering clear paths forward.

Key Elements

An effective 404 page includes the following elements:

Clear error message - A prominent heading such as "Page not found" or "404 Error" that immediately communicates the issue
Helpful explanation - A brief, friendly description of why this might have happened (broken link, mistyped URL, or removed page)
Navigation options - Links to help users find what they need, including a link to the homepage, search functionality, or popular pages
Consistent branding - The page maintains your site's header, footer, and visual identity so users know they are still on your website

404 Page Example

Component Preview

Page not found

We're sorry, we can't find the page you're looking for. It might have been removed, changed its name, or is otherwise unavailable.

If you typed the URL directly, check your spelling and capitalization. Our URLs look like this: agency.gov/example-one.

Visit our homepage for helpful tools and resources, or contact us and we'll point you in the right direction.

For immediate assistance:

Error code: 404

Component Code


<div class="grid-container">
  <div class="grid-row grid-gap">
    <main class="grid-col-fill">
      <div class="usa-prose">
        <h1>Page not found</h1>
        <p class="usa-intro">
          We're sorry, we can't find the page you're looking for.
          It might have been removed, changed its name, or is
          otherwise unavailable.
        </p>
        <p>
          If you typed the URL directly, check your spelling and
          capitalization. Our URLs look like this:
          <strong>agency.gov/example-one</strong>.
        </p>
        <p>
          Visit our homepage for helpful tools and resources, or
          contact us and we'll point you in the right direction.
        </p>
        <div class="margin-y-5">
          <ul class="usa-button-group">
            <li class="usa-button-group__item">
              <a href="/civic-guide/" class="usa-button">Visit homepage</a>
            </li>
            <li class="usa-button-group__item">
              <a href="/contact" class="usa-button usa-button--outline">
                Contact us
              </a>
            </li>
          </ul>
        </div>
        <p>For immediate assistance:</p>
        <ul>
          <li><a href="/topics" class="usa-link">Browse our main topics</a></li>
          <li><a href="/search" class="usa-link">Search our site</a></li>
          <li><a href="/faq" class="usa-link">View frequently asked questions</a></li>
        </ul>
        <p class="text-base margin-top-5">
          <strong>Error code:</strong> 404
        </p>
      </div>
    </main>
  </div>
</div>

Guidance

When to use the 404 page template

All websites should have a custom 404 page rather than relying on default server error pages.

Use this template when you need to gracefully handle requests for pages that do not exist.

Implement this page as part of your site's error handling configuration to catch all invalid URLs.

Best practices

Use a friendly, helpful tone.: Avoid language that blames the user. Instead of "You entered an invalid URL," say "We can't find the page you're looking for."
Provide clear next steps.: Always include at least one prominent action the user can take, such as returning to the homepage or using site search.
Include search functionality.: If your site has search, provide a search box or link to help users find what they were looking for.
Avoid technical jargon.: While you can include the error code for reference, do not use technical language that may confuse general users.
Maintain consistent branding.: Keep the same header, footer, and navigation as the rest of your site so users know they are still in the right place.
Consider adding popular links.: Include links to your most-visited pages or common entry points to help users find relevant content quickly.

Accessibility considerations

Use proper heading structure.: The page title should be an <h1> element, with subsequent sections using appropriate heading levels.
Provide clear, descriptive link text.: Use link text that describes the destination, such as "Visit homepage" rather than "Click here."
Ensure sufficient color contrast.: Error pages should meet the same WCAG color contrast requirements as the rest of your site.
Make the page keyboard navigable.: Users should be able to access all links and interactive elements using only a keyboard.

USWDS Documentation

For more guidance, view the USWDS 404 Page Template Documentation.