HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

Heading define the structure / outline / table of content of the document (page)

They are defined via:

• the heading element (h1/h6)
• via the aria heading role

• Red Box: H1 - Title of the page / website
• Blue Box: H2 - Title of the section
• Green Box: H3 - Title of the subsection

Grouped with a header element

<header>
  <h1>My Title In the TOC</h1>
  <p>My Subtitle Line 1</p>
  <p>Editor’s Draft 9 May 2013</p>
</header>

• hn (h1 to h6)

The H(n) element applies a level-(n) heading syle to the contained text.

<h1>H1 - Generally the page title</h1>
<h2>H2 - Introduction</h2>
<h3>H3 - Prologue</h3>
<h4>H4 - Level-4 Heading</h4>
<h5>H5 - Level-5 Heading</h5>
<h6>H6 - Level-6 heading, smallest heading available</h6>

Using role=“heading to an element causes an AT (like a screen reader) to treat it as though it were a heading.

Ref:

• ARIA Heading Roles
• https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12

You can add numbering to your heading via css. See heading numbering

Example:

• The CSS with counter.

section { counter-increment: section; }
h1::before { content: "Chapter " counter(section,lower-alpha) ": \A"; }

• The HTML

<section>
<h1>First</h1>
</section>
<section>
<h1>Second</h1>
</section>