Headings (<h1>-<h6>, <hgroup>)

When To Use:

• Well-structured headings are crucial for both screen reader users and search engines, as heading levels carry significance. Therefore, it is important to write headings carefully, as what benefits your readers also improves your SEO. ¹

Rules

• Organize headings based on their level or rank, with the most significant heading having a rank of 1 (<h1>) and the least significant heading having a rank of 6 (<h6>). ²
• Skipping heading levels can cause confusion for both readers and search engines, so it‘s important to avoid doing so. ²
• <h1> specific rules:
  • It‘s not recommended to include multiple <h1> elements on a single page since each page should have a single <h1> element that accurately describes its content, much like the <title> element. ³
  • The <h1> element should come right before your main content if possible. So for example place it as the first semantic element inside your <main> element. ¹
  • While the <h1> element can be the first heading on a page, it is not required to be. ²
  • It‘s considered best practice for each section of a website to have a distinctive and visually clear <h1> heading. Consequently, using a logo as an <h1> heading is not advisable. ²
• If text is visually styled in a way that conveys the meaning of a heading it needs to also use an appropriate heading element. Don‘t just use a <span> or <div>. ⁶ Also don‘t do the opposite: Don‘t use a heading element just to style a text bigger if it does not convey the meaning of a heading.
• For fixed sections of a page, such as sidebars or footers, it is acceptable to skip heading ranks. In such cases, it is crucial to maintain consistency across all pages of the website. ²
  • Frequently, fixed sections are initiated with the <h2> rank, as illustrated in examples such as the W3C heading examples or the headings in the footer on the MDN website. ³
• An effective heading text should accurately reflect the content that follows it. ¹
• Although there is no specific length requirement for headings, they should still be concise and easy to scan, primarily for the sake of usability. ¹
• Avoid using all capital letters for headings. ¹
• If necessary, ensure that headings within reusable components (such as Vue components) are dynamic and can fit into the overall heading structure. ¹
• When using sections to divide the content on your page, each section should when ever possible include a descriptive heading. ⁷
• Using aria-labelledby on <section> elements to link them to a single heading inside is not required. ¹
  • This is because navigation by landmarks is not particularly common and because the section heading is already announced in addition to the main heading. Adding aria-labelledby on <section> elements may result in additional text that screen reader users have to navigate through, leading to a cluttered listening experience. ¹
• Headings should not be utilized as subheadings, subtitles, alternative titles, taglines, or slogans. In these situations, it‘s recommended to use a <p> tag instead. ⁴
  • A11y Project argues, that you alternatively could use the <hgroup> element in such cases. But only when used with the role="group" and aria-roledescription="Heading group" attributes. This is because the <hgroup> is not supported by assistive technologies. ¹
  • When using the <hgroup> element, make sure to only include one heading element inside of it and one or more <p> elements. ⁵
• It‘s generally unsuitable to use headings within tables, such as in <th> elements. ⁴

Sources 

1. A11Y Project: Heading Structure by Rian Rietveld is licensed under APACHE LICENSE, VERSION 2.0
2. W3C WAI: Headings Tutorial by W3C WAI Tutorial Contributors is licensed under W3C Document License
3. MDN: <h1>–<h6>: The HTML Section Heading elements by Mozilla contributors is licensed under CC-BY-SA 2.5
4. Yale University: Headings Copyright © Yale University
5. HTML Spec: Living Standard, 4.3 Sections, hgroup is licensed under Creative Commons Attribution 4.0 International License
6. W3C: Failure of Success Criterion 1.3.1 by W3C ARIA Task Forces is licensed under W3C Document License
7. W3C: Section Headings (Level AAA) by W3C ARIA Task Forces is licensed under W3C Document License