Use various heading sizes to create a clear hierarchy of page sections for enhanced usability. Large headings are hierarchically superior to smaller headings (i.e. the larger precedes the smaller).
Heading components are paired with HTML heading elements such as <h1> through <h6>. Whenever possible, match the heading component to the same size of HTML heading element to create a match between the visual hierarchy (component) visible to the user and the sematic hierarchy (HTML element) that will be read by screen readers and machines.
There are times when you may not want these to match (e.g. for SEO purposes), so mismatching components and elements is supported.
The type ramp applies to the use of the heading component when it is used in conjunction with subheading or paragraph components. Generally the type ramp requires that the numerical level of associated components be the same. While this is the recommended usage, it is not enforced within the MWF framework since it is recognized that exceptional circumstances do occurr.
- Use the appropriate numbered tag for the relative importance of each heading compared to other headings on the page.
- Keep headings short and succinct.
- Headings should be descriptive summaries of the content below them.
- Headings can exist without a subheading, but not vice versa.
- Use the HTML <h1>, <h2>... <h6> elements for headings only.
- In modules, use the
c-headingclass when sizes and padding are not needed to maintain a small footprint while still targeting the heading.
- Ideally, the beginning of the page's main content should start with <h1> and, whenever possible, there should be only one <h1> per page.
- Do not use headings just to make text big or bold or to style body text. Headings have a specific semantic role and nothing more.
- Do not allow a heading to be a full sentence nor end with terminal punctuation (like a period).
- Do not stagger multiple headings in the layout. Be mindful of the baseline and how that lines up with other elements in the layout.
- Do not skip heading levels, if you can avoid it.
- Use any of the Heading component styles for adding heading content within a page.
- Choose a Heading level that best organized your page content. Then choose the Heading style to meet your design needs. For example, an <h2> element does not absolutely require
class="c-heading-2". It could be any of the other levels as well.
- In the Heading with link option examples below, the Heading itself has been hidden from screen readers to avoid reading duplicate content when reaching "See all". Thus, the
aria-labelhas been added to merge the heading and the "See all” together. The screen reader then will read: "See all Heading 4" or "See all Surface Pro 4's."
- Size: Use the appropriate classes
c-heading-6to set sizes with standard amounts of padding according to the type ramp.
- Arbitrary size: Use class
c-headingto only specify the component as a heading, and let the context dictate the size.
- Sets: When used together, the heading, subheading and paragraph elements should be size coordinated. This is done by assigning each element to the same numerical class name. For example, a heading with class
c-heading-2is followed by a paragraph with class
c-paragraph-2, which is followed by a subheading with class
c-subheading-2and another paragraph with class
c-paragraph-2. This creates a well balanced set of text blocks. This feature is available for sizes 1-4.
- Lean: Add the class
f-leanto any of the elements discussed above (for sizes 1-4) to override their top padding values to 0px.
- Link: In this special case, you can combine a heading with a hyperlink where the link is displayed at the right margin relative to the left justified position of the heading text. See the examples below for more information.
- Align initial baseline: In cases where headings need to line up horizontally across columns at the start of a section, apply either the
f-initial-baseline-largealignment option class to match heading baselines across differing heading types (e.g. c-heading-1 paired with a c-heading-5). The
f-initial-baseline-largeclass will result in greater headroom above the headings than
f-initial-baseline-small class. It is reccommended to use the small option with mixtures of
- Schema definition: The heading schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<h1 class="c-heading-1">Heading 1</h1>
<h2 class="c-heading-2">Heading 2</h2>
<h3 class="c-heading-3">Heading 3</h3>
<h4 class="c-heading-4">Heading 4</h4>
<h5 class="c-heading-5">Heading 5</h5>
<h6 class="c-heading-6">Heading 6</h6>
Heading 1 with link option See all
<h2 class="c-heading-1"> <span>Heading 1 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 1">See all</a> </h2>
Heading 2 with link option See all
<h2 class="c-heading-2"> <span>Heading 2 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 2">See all</a> </h2>
Heading 3 with link option See all
<h2 class="c-heading-3"> <span>Heading 3 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 3">See all</a> </h2>
Heading 4 with link option See all
<h2 class="c-heading-4"> <span>Heading 4 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 4">See all</a> </h2>
Heading 5 with link option See all
<h2 class="c-heading-5"> <span>Heading 5 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 5">See all</a> </h2>
Heading 6 with link option See all
<h2 class="c-heading-6"> <span>Heading 6 with link option</span> <a href="#" class="c-hyperlink" aria-label="See all Heading 6">See all</a> </h2>
Heading 4 with lean option
<h4 class="c-heading-4 f-lean">Heading 4 with lean option</h4>