Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Headings

The usage of heading levels and semantics in HTML.

Guidelines

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!

 

Default heading styles

Chlorophyll (CSS Framework from Green Design System) uses the following default styling for heading elements:

H1 Extra large
H2 Large
H3 Medium
H4 Small
H5 XS
H6    2XS

 

Links

Font styles in Figma 

 

Accessibility

A level should never be skipped. A H3 for instance, should never go directly under a H1 and so on. 

 

Related patterns & components

Page last updated

Feedback

Was this helpful?