About
Heading define the structure / outline / table of content of the document (page)
They are defined via:
- via the aria heading role
They implicitly create a new section of the document
In a letter, the heading is one sentence that explains the reason of the letter
Sequential Order
Because they defined the TOC, they should be in sequential order.
If this is not the case, the TOC will not have a hierarchical structure.
Any HTML analytics tool such Lighthouse will complain if this is not the case.
Example
Page Structure
- Red Box: H1 - Title of the page / website
- Blue Box: H2 - Title of the section
- Green Box: H3 - Title of the subsection
Composed with Subtitle in Header
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>
Definition
Hn
- en-US/docs/Web/HTML/Element/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>
ARIA
Using role=“heading to an element causes an AT (like a screen reader) to treat it as though it were a heading.
Ref:
Styling
Numbering
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>