HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)
Table of Contents
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
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
- 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>