Templates

404 page

A 404 page informs users that a requested page doesn’t exist.

About the 404 page template

A 404 page informs users that a requested page doesn’t exist. This kind of error can be frustrating or confusing. Straightforward plain language can help. Use a 404 page to explain the error and instruct the user what to do next.

This 404 page template has six sections. This general structure is also applicable to non-404 error pages as well:

  1. Describe the error: Heading
  2. What caused the error: Lead text
  3. Possible ways to fix the error: Regular text
  4. Actions: Buttons or links
  5. Additional support channels, if available: List
  6. Error code: Small text
<!DOCTYPE html>
<html lang="en-US">
  <!-- generated by uswds@2.12.2 -->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>USWDS Fractal example document</title>
    <link rel="stylesheet" href="/assets/css/uswds.min.css" />
    <script src="/assets/js/uswds-init.min.js"></script>
  </head>
  <body>
    <a class="usa-skipnav" href="#main-content">Skip to main content</a>

    <section class="usa-banner" aria-label="Official government website">
      <div class="usa-accordion">
        <header class="usa-banner__header">
          <div class="usa-banner__inner">
            <div class="grid-col-auto">
              <img
                class="usa-banner__header-flag"
                src="/assets/img/us_flag_small.png"
                alt="U.S. flag"
              />
            </div>
            <div class="grid-col-fill tablet:grid-col-auto">
              <p class="usa-banner__header-text">
                An official website of the United States government
              </p>
              <p class="usa-banner__header-action" aria-hidden="true">
                Here’s how you know
              </p>
            </div>
            <button
              class="usa-accordion__button usa-banner__button"
              aria-expanded="false"
              aria-controls="gov-banner"
            >
              <span class="usa-banner__button-text">Here’s how you know</span>
            </button>
          </div>
        </header>
        <div class="usa-banner__content usa-accordion__content" id="gov-banner">
          <div class="grid-row grid-gap-lg">
            <div class="usa-banner__guidance tablet:grid-col-6">
              <img
                class="usa-banner__icon usa-media-block__img"
                src="/assets/img/icon-dot-gov.svg"
                role="img"
                alt=""
                aria-hidden="true"
              />
              <div class="usa-media-block__body">
                <p>
                  <strong> Official websites use .gov </strong>
                  <br />
                  A <strong>.gov</strong> website belongs to an official
                  government organization in the United States.
                </p>
              </div>
            </div>
            <div class="usa-banner__guidance tablet:grid-col-6">
              <img
                class="usa-banner__icon usa-media-block__img"
                src="/assets/img/icon-https.svg"
                role="img"
                alt=""
                aria-hidden="true"
              />
              <div class="usa-media-block__body">
                <p>
                  <strong> Secure .gov websites use HTTPS </strong>
                  <br />
                  A <strong>lock</strong> (
                  <span class="icon-lock"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="52"
                      height="64"
                      viewBox="0 0 52 64"
                      class="usa-banner__lock-image"
                      role="img"
                      aria-labelledby="banner-lock-title banner-lock-description"
                      focusable="false"
                    >
                      <title id="banner-lock-title">Lock</title>
                      <desc id="banner-lock-description">A locked padlock</desc>
                      <path
                        fill="#000000"
                        fill-rule="evenodd"
                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                      /></svg
                  ></span>
                  ) or <strong>https://</strong> means you’ve safely connected
                  to the .gov website. Share sensitive information only on
                  official, secure websites.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="usa-overlay"></div>
    <header class="usa-header usa-header--basic usa-header--megamenu">
      <div class="usa-nav-container">
        <div class="usa-navbar">
          <div class="usa-logo" id="basic-mega-logo">
            <em class="usa-logo__text">
              <a href="javascript:void(0)" title="&lt;Project title&gt;">
                &lt;Project title&gt;
              </a>
            </em>
          </div>
          <button class="usa-menu-btn">Menu</button>
        </div>
        <nav aria-label="Primary navigation" class="usa-nav">
          <button class="usa-nav__close">
            <img
              src="/assets/img/usa-icons/close.svg"
              role="img"
              alt="Close"
            />
          </button>
          <ul class="usa-nav__primary usa-accordion">
            <li class="usa-nav__primary-item">
              <button
                class="usa-accordion__button usa-nav__link usa-current"
                aria-expanded="false"
                aria-controls="basic-mega-nav-section-one"
              >
                <span>&lt;Current section&gt;</span>
              </button>

              <div
                id="basic-mega-nav-section-one"
                class="usa-nav__submenu usa-megamenu"
              >
                <div class="grid-row grid-gap-4">
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#">
                          &lt;A very long navigation link that goes onto two
                          lines&gt;
                        </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="usa-nav__primary-item">
              <button
                class="usa-accordion__button usa-nav__link"
                aria-expanded="false"
                aria-controls="basic-mega-nav-section-two"
              >
                <span>&lt;Section&gt;</span>
              </button>

              <div
                id="basic-mega-nav-section-two"
                class="usa-nav__submenu usa-megamenu"
              >
                <div class="grid-row grid-gap-4">
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#">
                          &lt;A very long navigation link that goes onto two
                          lines&gt;
                        </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="usa-nav__primary-item">
              <a href="javascript:void(0)" class="usa-nav__link">
                <span>&lt;Simple link&gt;</span>
              </a>
            </li>
          </ul>

          <form class="usa-search usa-search--small" role="search">
            <label class="usa-sr-only" for="basic-mega-search-field-en-small">
              Search
            </label>
            <input
              class="usa-input"
              id="basic-mega-search-field-en-small"
              type="search"
              name="search"
            />
            <button class="usa-button" type="submit">
              <span class="usa-sr-only">Search</span>
            </button>
          </form>
        </nav>
      </div>
    </header>

    <div class="usa-section">
      <div class="grid-container">
        <div class="grid-row grid-gap">
          <main class="" id="main-content">
            <div class="usa-prose">
              <!-- This template can be used for most types of error pages -->
              <!-- Remove these comments when you build your error pages -->

              <!-- Describe the error in the main heading -->
              <h1>Page not found</h1>

              <!-- Explain what caused the error in the lead text -->
              <p class="usa-intro">
                We’re sorry, we can’t find the page you&#39;re looking for. It
                might have been removed, changed its name, or is otherwise
                unavailable.
              </p>

              <!-- Provide instructions how the user can address or fix the error -->
              <p>
                If you typed the URL directly, check your spelling and
                capitalization. Our URLs look like this:
                <strong>&lt;agency.gov/example-one&gt;</strong>.
              </p>
              <p>
                Visit our homepage for helpful tools and resources, or contact
                us and we’ll point you in the right direction.
              </p>

              <!-- Use buttons for main actions user can take, such as visiting the homepage or a contact page -->
              <div class="margin-y-5">
                <ul class="usa-button-group">
                  <li class="usa-button-group__item">
                    <a href="javascript:void();" class="usa-button">
                      Visit homepage
                    </a>
                  </li>
                  <li class="usa-button-group__item">
                    <button
                      class="usa-button usa-button--outline"
                      type="button"
                    >
                      Contact Us
                    </button>
                  </li>
                </ul>
              </div>

              <!-- List additional support channels -->
              <p>For immediate assistance:</p>
              <ul>
                <li>
                  <a href="javascript:void();" class="usa-link"
                    >Start a live chat with us</a
                  >
                </li>

                <li>
                  Call
                  <a href="javascript:void();" class="usa-link"
                    >(555) 555-GOVT</a
                  >
                </li>
              </ul>

              <!-- Error code if appropriate -->
              <p class="text-base"><strong>Error code:</strong> 404</p>
            </div>
          </main>
        </div>
      </div>
    </div>

    <footer class="usa-footer">
      <div class="grid-container usa-footer__return-to-top">
        <a href="#">Return to top</a>
      </div>
      <div class="usa-footer__primary-section">
        <nav class="usa-footer__nav" aria-label="Footer navigation">
          <ul class="grid-row grid-gap">
            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <div class="usa-footer__secondary-section">
        <div class="grid-container">
          <div class="grid-row grid-gap">
            <div
              class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
            >
              <div class="mobile-lg:grid-col-auto">
                <img
                  class="usa-footer__logo-img"
                  src="/assets/img/logo-img.png"
                  alt=""
                />
              </div>
              <div class="mobile-lg:grid-col-auto">
                <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
              </div>
            </div>
            <div class="usa-footer__contact-links mobile-lg:grid-col-6">
              <div class="usa-footer__social-links grid-row grid-gap-1">
                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--facebook"
                    href="javascript:void(0);"
                  >
                    <span>Facebook</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--twitter"
                    href="javascript:void(0);"
                  >
                    <span>Twitter</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--youtube"
                    href="javascript:void(0);"
                  >
                    <span>YouTube</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--instagram"
                    href="javascript:void(0);"
                  >
                    <span>Instagram</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--rss"
                    href="javascript:void(0);"
                  >
                    <span>RSS</span>
                  </a>
                </div>
              </div>
              <h3 class="usa-footer__contact-heading">
                &lt;Agency Contact Center&gt;
              </h3>
              <address class="usa-footer__address">
                <div class="usa-footer__contact-info grid-row grid-gap">
                  <div class="grid-col-auto">
                    <a href="tel:1-800-555-5555"> &lt;(800) 555-GOVT&gt; </a>
                  </div>
                  <div class="grid-col-auto">
                    <a href="mailto:&lt;info@agency.gov&gt;">
                      &lt;info@agency.gov&gt;
                    </a>
                  </div>
                </div>
              </address>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <div class="usa-identifier">
      <section
        class="usa-identifier__section usa-identifier__section--masthead"
        aria-label="Agency identifier,"
      >
        <div class="usa-identifier__container">
          <div class="usa-identifier__logos">
            <a href="javascript:void(0);" class="usa-identifier__logo">
              <img
                class="usa-identifier__logo-img"
                src="/assets/img/circle-gray-20.svg"
                alt="&lt;Parent agency&gt; logo"
                role="img"
              />
            </a>
          </div>
          <div class="usa-identifier__identity" aria-label="Agency description">
            <p class="usa-identifier__identity-domain">&lt;domain.gov&gt;</p>
            <p class="usa-identifier__identity-disclaimer">
              An official website of the
              <a href="javascript:void(0);">&lt;Parent agency&gt;</a>
            </p>
          </div>
        </div>
      </section>
      <nav
        class="usa-identifier__section usa-identifier__section--required-links"
        aria-label="Important links,"
      >
        <div class="usa-identifier__container">
          <ul class="usa-identifier__required-links-list">
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link"
                >About &lt;Parent shortname&gt;</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link"
                >Accessibility support</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >FOIA requests</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >No FEAR Act data</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Office of the Inspector General</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Performance reports</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Privacy policy</a
              >
            </li>
          </ul>
        </div>
      </nav>
      <section
        class="usa-identifier__section usa-identifier__section--usagov"
        aria-label="U.S. government information and services,"
      >
        <div class="usa-identifier__container">
          <div class="usa-identifier__usagov-description">
            Looking for U.S. government information and services?
          </div>
          <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
        </div>
      </section>
    </div>

    <script src="/assets/js/uswds.min.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="es">
  <!-- generated by uswds@2.12.2 -->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>USWDS documento de ejemplo Fractal</title>
    <link rel="stylesheet" href="/assets/css/uswds.min.css" />
    <script src="/assets/js/uswds-init.min.js"></script>
  </head>
  <body>
    <a class="usa-skipnav" href="#main-content">
      Saltar al contenido principal
    </a>

    <section
      class="usa-banner"
      aria-label="Un sitio oficial del Gobierno de Estados Unidos"
    >
      <div class="usa-accordion">
        <header class="usa-banner__header">
          <div class="usa-banner__inner">
            <div class="grid-col-auto">
              <img
                class="usa-banner__header-flag"
                src="/assets/img/us_flag_small.png"
                alt="U.S. flag"
              />
            </div>
            <div class="grid-col-fill tablet:grid-col-auto">
              <p class="usa-banner__header-text">
                Un sitio oficial del Gobierno de Estados Unidos
              </p>
              <p class="usa-banner__header-action" aria-hidden="true">
                Así es como usted puede verificarlo
              </p>
            </div>
            <button
              class="usa-accordion__button usa-banner__button"
              aria-expanded="false"
              aria-controls="gov-banner"
            >
              <span class="usa-banner__button-text"
                >Así es como usted puede verificarlo</span
              >
            </button>
          </div>
        </header>
        <div class="usa-banner__content usa-accordion__content" id="gov-banner">
          <div class="grid-row grid-gap-lg">
            <div class="usa-banner__guidance tablet:grid-col-6">
              <img
                class="usa-banner__icon usa-media-block__img"
                src="/assets/img/icon-dot-gov.svg"
                role="img"
                alt=""
                aria-hidden="true"
              />
              <div class="usa-media-block__body">
                <p>
                  <strong> Los sitios web oficiales usan .gov </strong>
                  <br />
                  Un sitio web <strong>.gov</strong> pertenece a una
                  organización oficial del Gobierno de Estados Unidos.
                </p>
              </div>
            </div>
            <div class="usa-banner__guidance tablet:grid-col-6">
              <img
                class="usa-banner__icon usa-media-block__img"
                src="/assets/img/icon-https.svg"
                role="img"
                alt=""
                aria-hidden="true"
              />
              <div class="usa-media-block__body">
                <p>
                  <strong> Los sitios web seguros .gov usan HTTPS </strong>
                  <br />
                  Un <strong>candado</strong> (
                  <span class="icon-lock"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="52"
                      height="64"
                      viewBox="0 0 52 64"
                      class="usa-banner__lock-image"
                      role="img"
                      aria-labelledby="banner-lock-title banner-lock-description"
                      focusable="false"
                    >
                      <title id="banner-lock-title">Lock</title>
                      <desc id="banner-lock-description">A locked padlock</desc>
                      <path
                        fill="#000000"
                        fill-rule="evenodd"
                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                      /></svg
                  ></span>
                  ) o <strong>https://</strong> significa que usted se conectó
                  de forma segura a un sitio web .gov. Comparta información
                  sensible sólo en sitios web oficiales y seguros.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="usa-overlay"></div>
    <header class="usa-header usa-header--basic usa-header--megamenu">
      <div class="usa-nav-container">
        <div class="usa-navbar">
          <div class="usa-logo" id="basico-mega-logo">
            <em class="usa-logo__text">
              <a href="javascript:void(0)" title="&lt;Project title&gt;">
                &lt;Project title&gt;
              </a>
            </em>
          </div>
          <button class="usa-menu-btn">Menú</button>
        </div>
        <nav aria-label="Primary navigation" class="usa-nav">
          <button class="usa-nav__close">
            <img
              src="/assets/img/usa-icons/close.svg"
              role="img"
              alt="Cerrar"
            />
          </button>
          <ul class="usa-nav__primary usa-accordion">
            <li class="usa-nav__primary-item">
              <button
                class="usa-accordion__button usa-nav__link usa-current"
                aria-expanded="false"
                aria-controls="basico-mega-nav-section-one"
              >
                <span>&lt;Current section&gt;</span>
              </button>

              <div
                id="basico-mega-nav-section-one"
                class="usa-nav__submenu usa-megamenu"
              >
                <div class="grid-row grid-gap-4">
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#">
                          &lt;A very long navigation link that goes onto two
                          lines&gt;
                        </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="usa-nav__primary-item">
              <button
                class="usa-accordion__button usa-nav__link"
                aria-expanded="false"
                aria-controls="basico-mega-nav-section-two"
              >
                <span>&lt;Section&gt;</span>
              </button>

              <div
                id="basico-mega-nav-section-two"
                class="usa-nav__submenu usa-megamenu"
              >
                <div class="grid-row grid-gap-4">
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#">
                          &lt;A very long navigation link that goes onto two
                          lines&gt;
                        </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                  <div class="usa-col">
                    <ul class="usa-nav__submenu-list">
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                      <li class="usa-nav__submenu-item">
                        <a href="#"> &lt;Navigation link&gt; </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li class="usa-nav__primary-item">
              <a href="javascript:void(0)" class="usa-nav__link">
                <span>&lt;Simple link&gt;</span>
              </a>
            </li>
          </ul>

          <form class="usa-search usa-search--small" role="search">
            <label class="usa-sr-only" for="basico-mega-search-field-es-small">
              Buscar
            </label>
            <input
              class="usa-input"
              id="basico-mega-search-field-es-small"
              type="search"
              name="search"
            />
            <button class="usa-button" type="submit">
              <span class="usa-sr-only">Buscar</span>
            </button>
          </form>
        </nav>
      </div>
    </header>

    <div class="usa-section">
      <div class="grid-container">
        <div class="grid-row grid-gap">
          <main class="" id="main-content">
            <div class="usa-prose">
              <!-- This template can be used for most types of error pages -->
              <!-- Remove these comments when you build your error pages -->

              <!-- Describe the error in the main heading -->
              <h1>No se encontró esta página</h1>

              <!-- Explain what caused the error in the lead text -->
              <p class="usa-intro">
                Lo sentimos, pero no podemos encontrar la página que busca. Es
                posible que haya sido eliminada, cambiado de nombre o no esté
                disponible por ahora.
              </p>

              <!-- Provide instructions how the user can address or fix the error -->
              <p>
                Si escribió el URL a mano, verifique su ortografía y el uso de
                mayúsculas. Nuestros URLs aparecen así:
                <strong>&lt;agency.gov/example-one&gt;</strong>.
              </p>
              <p>
                Visite nuestra página principal para encontrar herramientas y
                recursos útiles o contáctenos y lo ayudaremos a encontrar lo que
                busca.
              </p>

              <!-- Use buttons for main actions user can take, such as visiting the homepage or a contact page -->
              <div class="margin-y-5">
                <ul class="usa-button-group">
                  <li class="usa-button-group__item">
                    <a href="javascript:void();" class="usa-button">
                      Visite la página principal
                    </a>
                  </li>
                  <li class="usa-button-group__item">
                    <button
                      class="usa-button usa-button--outline"
                      type="button"
                    >
                      Contáctenos
                    </button>
                  </li>
                </ul>
              </div>

              <!-- List additional support channels -->
              <p>Para ayuda inmediata:</p>
              <ul>
                <li>
                  <a href="javascript:void();" class="usa-link"
                    >Chatee con nosotros</a
                  >
                </li>

                <li>
                  Llámenos al
                  <a href="javascript:void();" class="usa-link"
                    >(555) 555-GOVT</a
                  >
                </li>
              </ul>

              <!-- Error code if appropriate -->
              <p class="text-base"><strong>Código de error:</strong> 404</p>
            </div>
          </main>
        </div>
      </div>
    </div>

    <footer class="usa-footer">
      <div class="grid-container usa-footer__return-to-top">
        <a href="#">Subir</a>
      </div>
      <div class="usa-footer__primary-section">
        <nav class="usa-footer__nav" aria-label="Footer navigation">
          <ul class="grid-row grid-gap">
            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>

            <li
              class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
            >
              <a class="usa-footer__primary-link" href="javascript:void(0);">
                &lt;Primary link&gt;
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <div class="usa-footer__secondary-section">
        <div class="grid-container">
          <div class="grid-row grid-gap">
            <div
              class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
            >
              <div class="mobile-lg:grid-col-auto">
                <img
                  class="usa-footer__logo-img"
                  src="/assets/img/logo-img.png"
                  alt=""
                />
              </div>
              <div class="mobile-lg:grid-col-auto">
                <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
              </div>
            </div>
            <div class="usa-footer__contact-links mobile-lg:grid-col-6">
              <div class="usa-footer__social-links grid-row grid-gap-1">
                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--facebook"
                    href="javascript:void(0);"
                  >
                    <span>Facebook</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--twitter"
                    href="javascript:void(0);"
                  >
                    <span>Twitter</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--youtube"
                    href="javascript:void(0);"
                  >
                    <span>YouTube</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--instagram"
                    href="javascript:void(0);"
                  >
                    <span>Instagram</span>
                  </a>
                </div>

                <div class="grid-col-auto">
                  <a
                    class="usa-social-link usa-social-link--rss"
                    href="javascript:void(0);"
                  >
                    <span>RSS</span>
                  </a>
                </div>
              </div>
              <h3 class="usa-footer__contact-heading">
                &lt;Agency Contact Center&gt;
              </h3>
              <address class="usa-footer__address">
                <div class="usa-footer__contact-info grid-row grid-gap">
                  <div class="grid-col-auto">
                    <a href="tel:1-800-555-5555"> &lt;(800) 555-GOVT&gt; </a>
                  </div>
                  <div class="grid-col-auto">
                    <a href="mailto:&lt;info@agency.gov&gt;">
                      &lt;info@agency.gov&gt;
                    </a>
                  </div>
                </div>
              </address>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <div class="usa-identifier">
      <section
        class="usa-identifier__section usa-identifier__section--masthead"
        aria-label="Identificador de la agencia,"
      >
        <div class="usa-identifier__container">
          <div class="usa-identifier__logos">
            <a href="javascript:void(0);" class="usa-identifier__logo">
              <img
                class="usa-identifier__logo-img"
                src="/assets/img/circle-gray-20.svg"
                alt="Logo de la &lt;Parent agency&gt;"
                role="img"
              />
            </a>
          </div>
          <div
            class="usa-identifier__identity"
            aria-label="Descripción de la agencia"
          >
            <p class="usa-identifier__identity-domain">&lt;domain.gov&gt;</p>
            <p class="usa-identifier__identity-disclaimer">
              Un sitio web oficial de
              <a href="javascript:void(0);">&lt;Parent agency&gt;</a>
            </p>
          </div>
        </div>
      </section>
      <nav
        class="usa-identifier__section usa-identifier__section--required-links"
        aria-label="Enlaces importantes,"
      >
        <div class="usa-identifier__container">
          <ul class="usa-identifier__required-links-list">
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link"
                >Acerca de &lt;Parent shortname&gt;</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link"
                >Soporte de accesibilidad</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Solicitud a través de FOIA</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Datos de la ley No FEAR</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Oficina del Inspector General</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Informes de desempeño</a
              >
            </li>
            <li class="usa-identifier__required-links-item">
              <a
                href="javascript:void(0);"
                class="usa-identifier__required-link usa-link"
                >Política de privacidad</a
              >
            </li>
          </ul>
        </div>
      </nav>
      <section
        class="usa-identifier__section usa-identifier__section--usagov"
        aria-label="Información y servicios del Gobierno de EE. UU.,"
      >
        <div class="usa-identifier__container">
          <div class="usa-identifier__usagov-description">
            ¿Necesita información y servicios del Gobierno?
          </div>
          <a href="https://www.usa.gov/espanol/" class="usa-link"
            >Visite USAGov en Español</a
          >
        </div>
      </section>
    </div>

    <script src="/assets/js/uswds.min.js"></script>
  </body>
</html>

Guidance

When to use the 404 page template

  • Page doesn’t exist. Users might navigate to a missing page for a number of reasons:

    • They followed an incorrect link
    • The page was removed from the website
    • They entered a typo into the URL

When to consider something else

  • Other types of errors. Don’t use this template for form validation errors, submission errors, or if a website has been taken down for maintenance.

  • Inline errors. Use alerts or form input errors when displaying errors that occur from interactions on a page.

Usability guidance

  • Use concise, non-technical language. Don’t make the error code a prominent part of the page or get into too many details about what went wrong. Be concise and don’t add unnecessary content just to fill the space.

  • Avoid funny, cutesy, or whimsical error messages. Users might not get the joke or appreciate levity when attempting to access critical information or services. Government website content should always be authoritative and trustworthy.

  • Be apologetic. Show empathy, and don’t blame the user. Use messaging like “We’re sorry, that page can’t be found” instead of “Whoops, you made a mistake.”

  • Let users know what they can do next. This might be advice such as correcting typos in the URL or reporting a problem if they think they’ve reached the 404 page in error. Also, give them a way out of the “dead end” error page by directing them to the homepage, a contact page, a search page, or a chatbot/live chat.

  • Use a consistent layout. The error page should look like your website to avoid confusion. Include the main navigation so that users can navigate directly to another part of the site.

  • Don’t include multiple search boxes. Only include a search option on the error page if there isn’t already a search box in the site’s header or anywhere else on the page.

Using the 404 page template

Components used in this template