Headings

Standard HTML element headings. i.e H1, H2, H3 ...

Heading Sizes

Basic, un-classed heading elements.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading Group

Group related heading content together. A single <h1>, <h2>, <h3>, etc with one or more <p> elements.

Heading 1

Sub heading or 'lead' paragraph.


Useful notes and reading:

Notes:

  • Stick to the hierarchy

    Start with either a heading 1 (alpha), or display heading. Then use heading 2 (beta) and so on. Don't skip around the hierarchy or you may confuse users.

  • Create semantic structure

    Visual hierarchy can be really helpful for those whose can see it, but remember that not everyone is able to see it. Make sure everyone gets the benefit of your clearly structured content by using semantic tags i.e. <h1>, <h2>, etc.

Related Links: