# Accessible heading structure

DevFeed: [Accessible heading structure](<https://devfeed.tech/articles/accessible-heading-structure-9392.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-accessible-heading-structure/>)

Author: Rian Rietveld

Published: 2022-01-03T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Search engine optimization (SEO)](<https://devfeed.tech/topics/seo.md>), [web-standards](<https://devfeed.tech/topics/web-standards.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [seo](<https://devfeed.tech/tags/seo.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

This article explains how to create accessible, semantic heading structures in HTML. It recommends using one unique h1 for the page topic, choosing heading levels hierarchically to describe the content that follows, and avoiding headings used only for visual styling. It also discusses common mistakes and the relationship between heading structure, screen reader navigation, and SEO.

## Source excerpt

Headings are the backbone of the content of a page. A visitor should be able to scan the webpage using headings to get a good impression of its content. Heading levels have meaning, especially for screen reader users and search engines. That means one unique first level heading per page, with the other headings representing the page content similar to the index of a book: easily scannable and semantic. Write well-structured headings, because what is good for your reader, is also good for your SEO. Headings in HTML Headings are HTML elements. The main heading, h1, is level 1. The other levels are h2 up to h6. The HTML Living Standard states on headings: A heading can be used where heading content is expected. Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself). The HTML Living Standard, The h1, h2, h3, h4, h5, and h6 elements In short: use a heading when the content or the page structure requires it. Best practices summarized Use one unique h1 per page that describes what that page is about. That h1 preferably starts just above the main content. Use headings to describe the content below. Do not use an HTML heading just to make the text appear bigger or stand out. Use heading levels like the index of a book: hierarchical. Do not choose a heading by its size, but by its level in the context of the content. Do not skip a heading level from the top down. Common mistakes: Using a h2 heading for quotes because of its nice big font size. Using a h4 heading for the first paragraph of the text because it's just the size of bold text you need. Exclusively using h2 headings on a web page because all headings are the same size in the designs. Using multiple h1 headings on a web page. Omitting headings because the design clearly indicates the start of a new section. Leaving headings empty (usually a CMS glitch). What does hierarchical mean? Hierarchical means arranged in order