Skip to main content
Design resources
Back

Page heading

This pattern is the main heading of the current page, which lets the user know what information is being asked for or provided.

When to use

Use a page heading on every page.

You can also include a section heading if it helps the user know where they are in a service. For example, in long services and those with more than one section.

How it works

Main heading

Every page must have a main heading coded as an <h1>.

Open this example in a new tab: Page heading without subheading Display in English Display in Welsh 
              <h1 class="govuk-heading-l">What is your name?</h1>
            
                <h1 class="govuk-heading-l">Beth yw’ch enw?</h1>

Section heading

If you use a section heading, you should add an <h2> above the <h1> with a visually hidden span. You should change or remove the visually hidden content to meet your users’ needs.

Open this example in a new tab: Page heading with subheading Display in English Display in Welsh 
              <h2 class="govuk-caption-l hmrc-caption-l"><span class="govuk-visually-hidden">This section is </span>Your details</h2>
<h1 class="govuk-heading-l">What is your name?</h1>
            
                <h2 class="govuk-caption-l hmrc-caption-l"><span class="govuk-visually-hidden">Yr adran hon yw </span>Eich manylion</h2>
<h1 class="govuk-heading-l">Beth yw’ch enw?</h1>

Making labels and legends headings

Labels as page headings with subheadings

If your headings are also the label of a form input, add the <h2> above the form component.

Open this example in a new tab: Page heading as label with subheading Display in English Display in Welsh 
              <h2 class="govuk-caption-l hmrc-caption-l"><span class="govuk-visually-hidden">This section is: </span>Your details</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group">
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="example">What is your name?</label>
    </h1>

    <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
  </div>
</form>
            
                <h2 class="govuk-caption-l hmrc-caption-l"><span class="govuk-visually-hidden">Teitl yr adran hon yw </span>Manylion personol</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group">
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="example">Beth yw’ch enw?</label>
    </h1>

    <input class="govuk-input" id="example" name="example" type="text">
  </div>
</form>

Legends as page headings with subheadings

If your headings are within a form legend, add the <h2> above the forms fieldset.

Open this example in a new tab: Legend as page heading with subheading Display in English Display in Welsh 
              <h2 class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">This section is: </span>Your details</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">Have you changed your name?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0" name="changed-0" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="changed-0">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0-2" name="changed-0" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="changed-0-2">No</label>
        </div>
      </div>
    </fieldset>
  </div>
</form>
            
                <h2 class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">Yr adran hon yw: </span>Eich manylion</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">A ydych wedi newid eich enw?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0" name="changed-0" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="changed-0">Iawn</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0-2" name="changed-0" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="changed-0-2">Na</label>
        </div>
      </div>
    </fieldset>
  </div>
</form>

We use this method rather than the gov.uk ‘caption’ component as we believe it performs better for users of screen readers. This is because many screen reader users navigate the page using heading tags. This means:

  • captions before the <h1> are often skipped
  • captions nested within the <h1> can be repetitive

Beginning the page with an <h2> tag, although unusual, avoids these issues.

Error messages

Error messages should be styled like this:

Open this example in a new tab: Legend as page heading with subheading and error Display in English Display in Welsh 
              <h2 class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">This section is: </span>Your details</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group govuk-form-group--error">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">Have you changed your name?</h1>
      </legend>
      <p class="govuk-error-message">
        <span class="govuk-visually-hidden">Error:</span> Select whether you have changed your name
      </p>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0" name="changed-0" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="changed-0">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0-2" name="changed-0" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="changed-0-2">No</label>
        </div>
      </div>
    </fieldset>
  </div>

  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>
            
                <h2 class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">Yr adran hon yw: </span>Eich manylion</h2>

<form action="#" method="get" novalidate>
  <div class="govuk-form-group govuk-form-group--error">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">A ydych wedi newid eich enw?</h1>
      </legend>
      <p class="govuk-error-message">
        <span class="govuk-visually-hidden">Gwall:</span> Dewiswch a ydych wedi newid eich enw
      </p>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0" name="changed-0" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="changed-0">Iawn</label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="changed-0-2" name="changed-0" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="changed-0-2">Na</label>
        </div>
      </div>
    </fieldset>
  </div>

  <button type="submit" class="govuk-button" data-module="govuk-button">
    Yn eich blaen
  </button>
</form>

Make sure errors follow the guidance about error messages in the GOV.UK Design System and have specific error messages for specific error states.

Research

The recommended code has been tested with screen reader users, assistive technologies, supported browsers and multiple device types. Research showed it:

  • displayed as expected
  • worked consistently across different assistive technologies
  • helped users know where they were in the service
  • did not distract users from their task

We need more research. If you have used the page heading and section heading, get in touch to share your research findings.

Discuss the page heading on GitHub

Changes to this pattern

On 31 January 2023, this pattern replaced an older version. This was because the pattern did not work in all cases, like headings as labels and legends.