Short description

By reflecting of the hierarchical structure of headings and using correct semantic markup, you can create well-structured and meaningful content that enhances both visual presentation and accessibility.

Do's and don'ts

Do's

• Reflect over the hierarchical structure of your page
• Always include a H1 heading
• For developers: Use semantic markup for you headings

Dont's

• Use more than one H1 heading on the same page.
• Use styling XL for any other heading than H1
• Skip over a level, for example, having a a level 3 heading (h3) directly under a level 1 heading (h1).

Semantics in HTML

Semantics in HTML refers to the use of certain HTML elements that, aside from making up the actual stylable layout structure of the document, also communicate something about the meaning of that piece of the document. “Document”, in this context, refers to content in a web browser, whether it’s a regular web page or a highly interactive web application.

For example, these two lines of code are visually identical when rendered in a web browser:

<i>italic text</i>

<em>italic text</em>

But they differ in their semantics. The <i> element simply represents italicized text, whereas the <em> communicates the semantic meaning of stress emphasis: 

This is <em>not</em> a drill! 

This lets a screen reader know that this section of the text should be pronounced with extra emphasis.

Heading levels

In a similar fashion, semantic heading levels are an important tool to convey the hierarchical structure of the content.

H1

The level 1 heading, or the <h1>, represents the main title of the current document. Typically, a document should always have one level 1 heading, but there should never be more than one. 

H2

Level 2 headings, or <h2>, should represent the main top-level sections of the document.

H3 through H6

Often the top-level sections will have sub-headings of their own, and that’s where the H3 though H6 levels come into play. H3 will be a sub-heading of H2, H4 a sub-heading of H3, and so on.

As a rule of thumb, if you find yourself needing more levels than H4, you should probably take a step back and examine the structure of your document. Do you really need sub-sub-sub-sub-level headings? Such a deeply nested structure can easily become difficult for users to understand and perhaps it would be better to split the content into multiple pages with flatter hierarchies.

Heading levels and typographical styles

The visual appearance of the headings should generally match the level of the heading, i.e., H1 should be larger than H2, H2 larger than H3, etc. The relative appearance of the headings helps to visually communicate the structure of the document.

The Green design system has default styles defined for all heading levels. But, there may be edge cases where these styles will not match up with the styling requirements of your document. If that's the case, it is OK to override the default styles of the headings. But if you do, be sure to be mindful of how the apparent structure of your document is affected by those changes.

Never chose a different heading level solely to achieve a different visual style!

Links

Font styles in Figma