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.
The usage of heading levels and semantics in HTML.
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.
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:
But they differ in their semantics. The
<i> element simply represents italicized text, whereas the
<em> communicates the semantic meaning of stress emphasis:
</em> a drill!
This lets a screen reader know that this section of the text should be pronounced with extra emphasis.
In a similar fashion, semantic heading levels are an important tool to convey the hierarchical structure of the content.
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.
Level 2 headings, or
<h2>, should represent the main top-level sections of the document.
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.
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!