Page header

<header class="ds_page-header">
    <span class="ds_page-header__label  ds_content-label">Guide</span>
    <h1 class="ds_page-header__title">Apply for or renew a disabled parking permit</h1>

    <dl class="ds_page-header__metadata  ds_metadata">
        <div class="ds_metadata__item">
            <dt class="ds_metadata__key">Last updated</dt>
            <dd class="ds_metadata__value">8 November 2016</dd>
        </div>
    </dl>
</header>

About this component

Use the page header component as the heading on a standard content page. It tells users what the page is about.

The page header can include:

• what type of content page the page is, such as whether it’s a guide or an article

• data about the content, such as when it was first published or last updated

The content title in the page header must be descriptive and concise. It’s used by search engines and social media for to index the content. Search engines generally only use the first 60 characters of a title.

Your title should also be tagged with an H1 heading. Using an H1 heading element on the main title of content pages will help your website rank better.

Why we use this component

You should also use a H1 element for the title in the page header. Using a H1 will:

• help your content have a meaningful structure

• help your website rank better

The page header allows users who reach a page to understand what the content is about, and how current or up to date it is.

Related components

• page metadata component

Website analytics

Search engines use H1 headings when they index your site.

Metadata for the content should be available in the data layer. This includes published or last updated dates and labels.