When people think about headings on websites, they often think about the way they look: big, bold text that draws the eye.
In HTML, headings do far more than add visual style to a page. Misusing or not using headings in HTML hurts usability, accessibility, and search performance.
Headings are Semantic, Not Just Visual
Headings are semantic, meaning that HTML headings (<h1> through <h6>) communicate the hierarchy of content on the page.
There are 6 HTML heading levels.
<h1>is the top-level topic of the page. In practice, you should only use one H1 on a page. Technically HTML5 allows multiple H1s, but it can be confusing for assistive tech (as it makes it harder to identify what the actual title of the page is).<h2>headings are used to denote major sections under that main H1 topic<h3>headings represent subsections within that <h2> section
and so on down the line.
Headings create a logical outline of your page. A well-structured page is like a well-structured book. For example, let's say we have a book titled “What is Web Accessibility” with 2 chapters: “Why Accessibility Matters” and “How to Design Accessible Interfaces”.
Let’s also say that the first chapter, “Why Accessibility Matters,” has a subsection titled “Impact on Users” and “Legal Requirements”. The second chapter, “How to Design Accessible Interfaces” has a subsection titled “Color Contrast”.
In bullet points, we can organize the “What is Web Accessibility” book’s table of contents like so:
- What is Web Accessibility
- Why Accessibility Matters
- Impact on Users
- Legal Requirements
- How to Design Accessible Interfaces
- Color Contrast
- Why Accessibility Matters
With the same idea as organizing in bullet points, we can use headings in HTML to organize the book.
<h1>What is Web Accessibility?</h1>
<h2>Why Accessibility Matters</h2>
<h3>Impact on Users</h3>
<h3>Legal Requirements</h3>
<h2>How to Design Accessible Interfaces</h2>
<h3>Color Contrast</h3>In our book example, there’s only one H1, which is the title of the book. We can’t have a book with two titles can we?
Then, each chapter is labeled with an H2 tag, indicating that it’s one level “below” the title/main heading. After that, we have H3 tags as the next level down, denoting subsections within each chapter.
Note that you shouldn’t just jump from H1 to H3 (unless you have a deliberate structural reason). That would be like opening a book and jumping straight to a subsection, bypassing the start of the chapter. It wouldn’t likely make much sense.
The heading outline makes it easy for people using assistive technologies (and anyone else) to skim the content and make logical sense of the hierarchy of the page.
Styles Come from CSS, Not Heading Level
A common mistake developers often make is using a heading tag just because it looks big, to match designs expectations. Misusing heading levels can create accessibility issues as the page will have the wrong structure.
It’s important to remember to not pick a heading level based on style. Pick heading level based on structure. Then use CSS to control visual styling.
Headings Enable Navigation for Assistive Technology
Using the correct heading structure on your web pages is crucial for accessibility. Screen reader users have shortcuts they can use to move from one heading to the next. With a screen reader, they can jump to a specific section and start listening to content from there.
Just as using heading tags for styling is a bad idea, so is not using heading tags at all. If you only make text bold or bigger with CSS, but never mark it up as a proper heading, a screen reader won’t know that the break or change in content exists. This prevents the user from skimming or jumping around the page as needed.
For example, let’s say we have a Product Page:
<p style="font-weight: bold;">Product Page</p>
<p>Price</p>
<p>Features</p>No heading in our Product Page means the content becomes a giant wall of text the screen reader must listen to sequentially, increasing the time it will take the user to read the content.
In this simple example, we styled the title of the page with CSS classes but didn’t use a heading. Screen reader users won’t know for sure that the Product Page is the title of the page. They don’t get clues about the content from CSS styles.
A better way of creating the Product Page would be to use headings like this:
<h1>Product Page</h1>
<h2>Price</h2>
<h2>Features</h2>Using proper heading tags allows screen reader users to navigate with headings and get the information on the page faster.
Headings Help SEO & Search Engines
Google and other search engines read your headings to get important insights about the content. They can tell by the H1 tag what the main topic is (what the page is about), what the key subtopics are (denoted with H2), and what the supporting details are below each subtopic (H3s, and so on).
Well-structured headings make your content easier to index and often more likely to perform better in search. Google, for example, will use headings to build an outline of the page, just like a table of contents. It can then match that outline/the main topics to the right search queries.
And while modern search engines can handle a page with multiple H1 headings just fine – without effectively harming SEO – using a clear single primary <h1> is a good convention for clarity.
Conclusion
Headings are not a styling tool in HTML – they’re a semantic tool. You should use headings to define the hierarchy of the page’s content, help users navigate, make content accessible, and improve SEO. Proper headings make your HTML meaningful for both humans and machines.