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

About

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

They are defined via:

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

With the CSS content property, you can add a section numbering.

Example:

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>

Powered by ComboStrap