HTML has six heading levels: h1, h2, h3, h4, h5, h6.
The purpose of Headings is to identify, structure and organise blocks of content.
You could say a h1 defines the most important heading and a h6 defines the least important heading. But for the purpose of this article, think of headings as a way to define the structure of your content.
Typically it's best practice to have just one h1 tag per page.
Technically, you can use a h1 tag inside an article tag and have multiple articles on a page, essentially resulting in multiple h1s on the page. The h1 has to be nested inside the article tag in this case not to ruin the heading structure for the whole page.
Follow a nested structure
It's important that headings and their sub headings follow a nested structure on the page that descends down the levels from 1 to 6.
So once you've declared your first h1, and that h1 has a sub heading, then that next sub heading must be a h2. And if there was a sub heading to that h2, then the next sub heading must be a h3 and so on and so forth.
The key take away here is: you must not skip heading levels.
This means for example, you've declared a h1, the next sub heading can not be a h3, 4, 5 or 6.
It has to be a h2.
Headings are important, they allow users and search engines to understand the hierarchy of the content.
Headings should not be used to make text big, or bold. It is CSS's role to define presentation. Headings exist for semantic reasons, not presentation reasons.
Correct use:
<h1>Nike running shoes</h1>
...
<h2>Overview</h2>
...
<h3>Product details</h3>
...
<h2>Sizes</h2>
...This is semantically correct. It's defined a h1 for the page. It's proceeded by a "Overview" sub heading which is a h2. That sub heading has another sub heading in the form of "Product details" which is a h3. Then the next heading returns to the h2 level.
Incorrect use:
<h1>Nike running shoes</h1>
...
<h5>Overview</h5>
...
<h3>Product details</h3>
...
<h2>Sizes</h2>
...We've started off declaring a h1, which is correct. But, the heading level jumps to a h5 for "Overview", skipping over heading levels 2, 3 and 4. The next heading level jumps to a h3 for "Product details", which does not sit beneath the previous h5, nor the initial h1.
Correct use:
<h1>Welcome to our homepage</h1>
...
<h2>Featured Products</h2>
...
<h2>Latest Blog Posts</h2>
...
<h2>Special Offers</h2>
...
<h2>About Us</h2>
...
<h2>Contact</h2>
...This is a pattern often seen, where you define your h1 for the page, then all you have after that are h2s since there are no sub headings beneath the h2s.
NVDA screenreader showing headings:
The image above is a screenshot of the screenreader NVDA and it's elements list.
This elements list is showing the headings it has found on the BBC News webpage. Notice the "BBC News Home" is at the top level, making it the h1 for the page. Then nested beneath that are h2: "Top Stories" and "Coronation of King Charles III". Nested inside of "Top Stories" are h3: "Man arrested outside Buckingham Palace" etc.
This is a good example of heading structure and will allow assistive technology users to clearly understand the structure of this webpage and quickly find and jump to the information they are interested in.