Skip to content

Primer/Interface guidelines

Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

Heading

Heading defines the hierarchical structure and importance of the content they contain.

On this page

On this page

An image displaying each header from h1 to h6

Usage

Headings are used to structure the content on the page, with each heading representing a different level of importance. It is recommended to use headings in a logical manner to create a clear hierarchy and improve accessibility.

  • Heading should be used to communicate page organization and hierarchy.
  • Use heading as the title of a section or sub section.
  • Do not use heading for styling alone. For simply styling text, use text with relevant styling.

The heading component will render an html h2 tag without any default styling.

Accessibility

While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out. When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be consistent. See WCAG success criteria: 1.3.1: Info and Relationships.

Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience. Learn more about best heading practices (WAI Headings).