HTML Headings

Why It Matters

• Screen readers use headings for navigation. Screen reader users often navigate pages by jumping from heading to heading. A well-structured heading hierarchy lets them skip directly to the section they need without listening to everything in between.
• Search engines use headings to understand content. Headings signal what each section of your page is about. Search engines give extra weight to text in heading tags when determining page relevance for specific queries.
• They improve scanability for all users. Most web users scan pages rather than reading every word. Clear headings let sighted users quickly locate the information they need and decide whether to read a section in detail.
• Skipped levels break the hierarchy. Jumping from <h2> to <h4> creates a gap in the document outline. Screen readers announce the heading level, so a missing level confuses users about the structure.

How to Use Them Correctly

1. Use one <h1> per page. The <h1> should be the main title of the page and there should be exactly one. It tells everyone — users, screen readers, search engines — what this page is fundamentally about.
2. Follow a logical hierarchy. After the <h1>, use <h2> for major sections, <h3> for subsections within those, and so on. Never skip levels — do not jump from <h2> to <h4>.
3. Use headings for structure, not styling. If you need bigger or bolder text, use CSS — not a heading tag. Headings carry semantic meaning; using <h3> just because it looks the right size undermines the document structure.
4. Make headings descriptive. "Section 2" or "More Info" are not helpful headings. "How to Install" or "Pricing Plans" tell the reader exactly what each section contains.
5. Do not hide important content outside headings. If a section exists on your page, it should have a heading. Sections without headings are invisible to screen reader navigation and harder for all users to find.

Common Mistakes

• Using headings just for visual size. Making text an <h2> because you want it large and bold — not because it is a section heading — breaks the semantic structure. Use CSS classes for visual styling instead.
• Multiple <h1> tags on one page. Having two or three <h1> elements confuses the page hierarchy. Search engines and screen readers expect one main heading per page.
• Skipping heading levels. Going from <h1> directly to <h3> creates a broken outline. It suggests a missing section and confuses assistive technology users.
• Putting entire paragraphs in heading tags. Headings should be concise labels. A heading with 50 words is not a heading — it is a paragraph that has been given undue emphasis and semantic weight.