This pattern is currently experimental because more research is needed to validate it.
A page not found tells someone we cannot find the page they were trying to view. They are also known as 404 pages.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/page-not-found-pages/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">page not found pages</span>
example in a new tab
</a>
</div>
<iframe title="Page not found pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/page-not-found-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-page-not-found-pages-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-example-html" role="tab" aria-controls="page-not-found-pages-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-example-nunjucks" role="tab" aria-controls="page-not-found-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#page-not-found-pages-example-html" aria-controls="page-not-found-pages-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="page-not-found-pages-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Page not found</h1><pclass="govuk-body">
If you typed the web address, check it is correct.
</p><pclass="govuk-body">
If you pasted the web address, check you copied the entire address.
</p><pclass="govuk-body">
If the web address is correct or you selected a link or button, <ahref="#"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>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Page not found</h1><pclass="govuk-body">
If you typed the web address, check it is correct.
</p><pclass="govuk-body">
If you pasted the web address, check you copied the entire address.
</p><pclass="govuk-body">
If the web address is correct or you selected a link or button, <ahref="#"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
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.
Do not use:
breadcrumbs
technical jargon like 404 or bad request
informal or humorous words like oops
red text to warn people
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/page-not-found-pages/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">page not found pages second</span>
example in a new tab
</a>
</div>
<iframe title="Page not found pages second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/page-not-found-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-page-not-found-pages-second-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-second-example-html" role="tab" aria-controls="page-not-found-pages-second-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-second-example-nunjucks" role="tab" aria-controls="page-not-found-pages-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#page-not-found-pages-second-example-html" aria-controls="page-not-found-pages-second-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="page-not-found-pages-second-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Page not found</h1><pclass="govuk-body">
If you typed the web address, check it is correct.
</p><pclass="govuk-body">
If you pasted the web address, check you copied the entire address.
</p><pclass="govuk-body">
If the web address is correct or you selected a link or button, <ahref="#"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>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Page not found</h1><pclass="govuk-body">
If you typed the web address, check it is correct.
</p><pclass="govuk-body">
If you pasted the web address, check you copied the entire address.
</p><pclass="govuk-body">
If the web address is correct or you selected a link or button, <ahref="#"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: