General good headings example

Structuring content with headings is always a good thing: no published book containing structured text could ever live without it. Headings allow to skim through the book, and the table of contents (TOC) of a book is based on them. On websites, headings work the exact same way as they do on print documents.

Headings are marked up in HTML using <h1> to <h6>. You knew that, didn't you?

The following example contains a very basic headings outline. It may look familiar to you from "normal" print documents (like PDF) and books.

Generally good headings

Show HTML code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<h1>
  My Hobbies
</h1>
<p>
  These all are activities I love to do on a regular basis.
</p>
<h2>
  Physical Activities
</h2>
<h3>
  Playing Soccer
</h3>
<p>
  Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p>
<h3>
  Dancing
</h3>
<p>
  Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p>
<h4>
  Salsa
</h4>
<p>
  Salsa is a popular form of social dance that originated in the Caribbean.
</p>
<h4>
  Rock'n'Roll
</h4>
<p>
  Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
</p>
<h3>
  Gardening
</h3>
<p>
  Gardening is the practice of growing and cultivating plants as part of horticulture.
</p>
<h2>
  Relaxing Activities
</h2>
<h3>
  Watching Movies
</h3>
<p>
  A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p>
<h3>
  Meditate
</h3>
<p>
  Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.
</p>

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-4-9
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-10-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-10-3
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-4-9
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2021-10-3

On a visual level, the headings' prominent visual attributes (for example font size, weight, sometimes colours, etc.) allow visual users to know when a new chapter or sub chapter starts or ends, or to skim through the pages of a book looking for a specific chapter.

On a semantical level, headings also announce to screen reader users when a new chapter or sub chapter starts or ends. They also allow them to jump from one heading to another quickly. By displaying the full headings outline in the form of a table of contents, screen reader users can get an idea about the page's content very quickly.

By the way, if you do not know about semantics, go back and read Semantics and their importance for accessibility.

Hey, this is like in Word!

HTML headings can be compared closely to heading styles in text processors like Word.

If they are properly used, they allow the automatic generation of stuff like a TOC. And a TOC in a print document serves the exact same purpose like the document outline on a webpage.