Pages

Page not found pages

A page not found tells someone we cannot find the page they were trying to view. They are also known as 404 pages.

WCAG 2.2

New WCAG 2.2 criteria affects this pattern

To use ‘Page not found pages’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:

See the full list of components and patterns affected by WCAG 2.2.

Open this example in a new tab: page not found pages
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Page not found</h1>
        <p class="govuk-body">
          If you typed the web address, check it is correct.
        </p>
        <p class="govuk-body">
          If you pasted the web address, check you copied the entire address.
        </p>
        <p class="govuk-body">
          If the web address is correct or you selected a link or button, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Page not found</h1>
        <p class="govuk-body">
          If you typed the web address, check it is correct.
        </p>
        <p class="govuk-body">
          If you pasted the web address, check you copied the entire address.
        </p>
        <p class="govuk-body">
          If the web address is correct or you selected a link or button, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
        </p>
    </div>
  </div>
{% endblock %}

When to use this pattern

Use a page not found if someone is trying to view a page that does not exist. This happens if someone:

  • selects a link or button that takes them to a page that does not exist
  • types or copies a web address for a page that does not exist
  • types or copies a web address incorrectly

Test all links and buttons to make sure they work. Remember to do the hard work to make it simple.

Make sure any web addresses in your service, letters, forms and on GOV.UK are for pages that exist or redirect to pages that exist.

How it works

The page should have:

  • ‘Page not found – service name – GOV.UK’ as the page title
  • ‘Page not found’ as the H1
  • contact information, if it exists and helps meet a user need

Contact information should either:

  • be a link to a specific page that includes numbers and opening times
  • include all numbers and opening times

The content should be clear and concise, not blame the user.

WCAG 2.2

You must always write contact information in a clear and consistent way across ‘Page not found’ and similar service error pages. This relates to WCAG 2.2 success criterion 3.2.6 Consistent Help.

Do not use:

  • breadcrumbs
  • technical jargon like 404 or bad request
  • informal or humorous words like oops
  • red text to warn people
Open this example in a new tab: page not found pages second
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Page not found</h1>
        <p class="govuk-body">
          If you typed the web address, check it is correct.
        </p>
        <p class="govuk-body">
          If you pasted the web address, check you copied the entire address.
        </p>
        <p class="govuk-body">
          If the web address is correct or you selected a link or button, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Page not found</h1>
        <p class="govuk-body">
          If you typed the web address, check it is correct.
        </p>
        <p class="govuk-body">
          If you pasted the web address, check you copied the entire address.
        </p>
        <p class="govuk-body">
          If the web address is correct or you selected a link or button, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
        </p>
    </div>
  </div>
{% endblock %}

Research on this pattern

More research is needed to find out if people:

  • can fix the problem on their own
  • understand what has happened
  • understand the content and if there is anything missing

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this pattern

Take part in our usage survey (opens in a new tab) to help us improve this pattern to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.