Text types

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

The available text types and how to apply them using HTML tags and classes.
Tag	Class	Sample
`<h1>`	`.h1`	Funding Guidelines
`<h2>`	`.h2`	Funding Guidelines
`<h2>`	`.heading-underline`	Funding Guidelines
`<h3>`	`.h3`	Funding Guidelines
`<h3>`	`.heading-underline`	Funding Guidelines
`<h4>`	`.h4`	Funding Guidelines
`<h5>`	`.h5`	Funding Guidelines
`<h6>`	`.h6`	Funding Guidelines
`<p>`		Funding Guidelines
`<p class="lead">`		Funding Guidelines
`<a>`		Funding Guidelines
`<mark>`	`.mark`	Funding Guidelines
`<small>`	`.small`	Funding Guidelines
`<del>`		~~Funding Guidelines~~
`<s>`	`.text-decoration-line-through`	Funding Guidelines
`<ins>`		Funding Guidelines
`<u>`	`.text-decoration-underline`	Funding Guidelines
`<strong>`		Funding Guidelines
`<b>`		Funding Guidelines
`<em>`		Funding Guidelines
`<i>`		Funding Guidelines
`<abbr>`		NIHR
`<abbr class="initialism">`		NIHR

Headings

Write all headings in sentence case.

Use heading tags, such as <h1>, <h2>, and so on, to tag the headings on a page. Style headings consistently to create a clear content structure throughout your service.

Paragraph text

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:

open this example in its own window

Your reference number is ABC12345678. Use this to track your application. Updates will be sent to name@example.com.

<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:

open this example in its own window

You must read some of the National Institute for Health and Care Research's new research!

<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.

open this example in its own window

Now that your application has been submitted, you can view its progress.

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

Readability

Use these elements and styles sparingly. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.