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.
<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.
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.
