Headings are one of the most important structural elements on a web page. They act as labels that identify the topic of each section of content, much like chapter titles and section headings in a book. Rather than reading every word from top to bottom, most users scan a page by looking for headings that clearly describe the content that follows. This makes long pages easier to understand and less overwhelming to navigate. Without headings, a web page can feel like a wall of text with no clear organization, forcing users to read through large amounts of content to find the information they need.
Well structured headings improve readability SEO, and allow screen reader usersto quickly scan and navigate your content.
A semantic heading is a heading that is coded using HTML elements that explicitly identify it as a heading. In HTML, there are six built-in heading elements:
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>Logical order matters, no skipped levels, clear hierarchy.
Logical order matters, no skipped levels, clear hierarchy.
<h1> is typically used for the main title of the page.<h2> identifies major sections of content.<h3> identifies subsections within an <h2>.<h4> through <h6> identify increasingly specific subsections.Because they are part of the page’s structure, semantic headings allow both browsers and assistive technologies to understand how content is organized and how different sections relate to one another.
A visual heading is any text that is styled to stand out from surrounding content. Designers use size, weight, color, spacing, and typography to draw attention and make certain text look important. The goal is to catch the user’s eye and signal what content is being introduced or emphasized.
From a visual perspective, anything that looks large, bold, or prominent can appear to be a heading, even if it is actually coded as a normal paragraph or a generic container element. Because they are focused only on presentation rather than structure, visual headings may appear to organize content on the page, but they do not actually communicate how the content is structured or how sections relate to one another to browsers and assistive technology.
Semantic Headings are more than large and bold text. They tell browsers and assistive technologies that a particular piece of text is the label for the content that follows. In other words, a heading programmatically defines the relationship between the heading and the section it introduces. Just as a reader can scan a table of contents to find the chapter they want, screen reader users can pull up a list of headings or press a single key to move from one heading to the next, allowing them to quickly locate the information that is most relevant to them. When headings are coded correctly, users can immediately understand the topics covered on the page and jump directly to the section they want to read. When headings are missing, or when section titles are created using plain text styled to look like headings, screen reader users lose this navigational aid and may be forced to listen to the page from top to bottom to determine what content is available and where they are within the page. On long pages, this can make it significantly more difficult to orient oneself and find specific information efficiently.
Proper semantic heading structure helps create a clear and predictable reading experience for all users, especially screen reader users who rely on headings to navigate a page efficiently. Headings should be nested logically so that each heading accurately labels the section of content that follows. In most cases, an <h1> identifies the main title of the page, <h2> elements identify major sections, and <h3> elements identify subsections within those sections. This pattern should continue in a meaningful and organized way throughout the page. It is also important to remember that just because text is styled to appear large, bold, or visually prominent does not automatically mean it should be coded as a semantic heading. Heading elements should only be used for text that introduces or labels a section of content.
There are several commonly accepted best practices for semantic heading structure. Many developers choose to use only one <h1> per page to clearly identify the primary topic of the page. It is also considered best practice to avoid skipping heading levels, such as jumping from an <h1> directly to an <h3>, because doing so can make the page structure more difficult to follow. Another important best practice is to avoid “stacking headings,” where one heading immediately follows another without meaningful content between them. While these practices are not specifically required by the Web Content Accessibility Guidelines (WCAG), Section 508, or the Americans with Disabilities Act, they help create a more consistent and predictable navigation experience for screen reader users.
When remediating broken semantic heading structure, developers generally have two options: directly changing heading tags or adding ARIA attributes to existing elements. In many cases, the simplest and most reliable solution is to replace incorrect heading elements with the appropriate native HTML heading tags. However, this can sometimes affect the visual appearance of the page because content management systems and designers have historically used heading elements as CSS selectors to control styling. For example, a website may apply specific font sizes, colors, or spacing directly to <h1> or <h2> elements through CSS. As a result, changing a heading level may unintentionally alter the visual design of the page. When headings are heavily tied to CSS selectors, remediation becomes more difficult and time-consuming, which is why it is generally considered best practice to separate styling from document structure and avoid using heading elements solely as styling hooks.
In situations where directly changing heading tags is not practical, developers can use ARIA attributes to help repair heading structure. The aria-level attribute can be used to define or adjust the heading level of an existing heading element. For example, if a heading needs to function as a level 2 heading, aria-level="2" can communicate that information to assistive technologies. If a non-heading element such as a <div> or <span> needs to function as a heading, developers must use both role="heading" and an aria-level value to properly define it as a heading. For example:
While ARIA can be useful for remediation, native HTML heading elements should always be preferred whenever possible. Native headings provide built-in semantic meaning and generally offer the most consistent support across browsers and assistive technologies. Although ARIA is widely supported, some assistive technologies may not interpret ARIA attributes as reliably as native HTML elements, making semantic HTML the most dependable solution for accessible heading structure.