Text types

Add semantic meaning and visual appearance to your text using our text types.

Headings

Write all headings in sentence case. That means words follow their own capitalisation rules (such as proper nouns), and that only the first word of the heading is additionally capitalised.

Use the heading elements <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, to hierarchically structure the content on a page.

If your visual content hierarchy differs from the markup, use the heading classes .h1, .h2, .h3, .h4, .h5, and .h6, to make a heading of one level visually appear as a heading of a different level.

Sections

To visually help users understand the structure of your content, you can optionally add an attention marker to level 2 headings:

<h2 class="heading-underline">Lorem ipsum</h2>

Paragraph text

Surround each paragraph of text with <p> tags. The first paragraph on a page may optionally be displayed as a lead paragraph:

<p class="lead">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse metus ex,
  cursus ut neque at, varius aliquam nisl. Nulla iaculis felis a dui mattis, sit
  amet molestie erat vestibulum.
</p>
<p>
  Aenean in egestas mauris, eu fringilla felis. Cras iaculis suscipit vulputate.
  Aliquam eu nunc tortor. Nunc ut interdum purus. Sed quis faucibus dolor.
</p>

Importance and attention

You can use <strong> to mark text as important, or <b> to draw attention to text that is not otherwise important. For example:

<p>
  Your reference number is <strong>ABC12345678</strong>. Use this to track your
  application. Updates will be sent to <b>name@example.com</b>.
</p>

Emphasis and idiomatic text

You can use <em> to emphasize text as one would do when speaking, or <i> to draw attention to mark idiomatic text, such as a name or a phrase that is not otherwise important. For example:

<p>
  You <em>must</em> read some of the
  <i>National Institute for Health and Care Research</i>'s new research!
</p>

Links

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

<p>
  Now that your application has been submitted, you can
  <a href="#">view its progress</a>.
</p>

Abbreviations and acronyms

Use abbreviations in your content by wrapping them in <abbr>.

If the abbreviation's full meaning is not explained earlier in the document or in the abbreviation's surrounding content, you should add the abbreviation's full meaning in the element's title attribute:

<p>
  <abbr title="National Institute for Health and Care Research">NIHR</abbr>
</p>