Heading Hierarchy
Overview
HTML provides six levels of headings, ranging from <h1> (the most important) down to <h6> (the least important). Structuring your headings correctly is one of the most vital rules in web development. Search engines like Google use your heading hierarchy to generate an 'outline' of your page's content, directly impacting SEO. Furthermore, visually impaired users utilizing screen readers use keyboard shortcuts to jump from heading to heading to navigate the page quickly.
Syntax
<!-- The H1 should represent the main title of the page -->
<h1>Ultimate Guide to Web Development</h1>
<!-- H2s are major sections within the page -->
<h2>Frontend Architecture</h2>
<!-- H3s are sub-sections within an H2 -->
<h3>Understanding the DOM</h3>
<h3>Modern CSS Layouts</h3>
<h2>Backend Architecture</h2>
<h3>Database Design</h3>
<h4>NoSQL vs SQL</h4>Common Pitfalls
- Using headings purely for visual styling (e.g., using an
<h3>just because you want big bold text, even if it logically skips an<h2>). You should use CSS for visual styling, and reserve heading tags exclusively for logical document structure. - Having multiple
<h1>tags on a single page. While technically allowed in modern HTML5, it is heavily frowned upon by SEO experts. Every distinct page should have exactly one<h1>defining its primary purpose.
Interview Questions
<h1> directly to <h4>) considered a bad practice?It breaks the logical document outline. Screen readers interpret skipped headings as missing content, confusing disabled users who rely on the outline to build a mental map of the webpage.
Real-World Example
A standard blog post outline demonstrating semantic heading progression.
<main>
<!-- Main Title -->
<h1>How to Master React in 2026</h1>
<!-- Section 1 -->
<h2>1. Understanding Server Components</h2>
<p>Server components shift rendering to the backend...</p>
<!-- Sub-section of Section 1 -->
<h3>When to use Client Components</h3>
<p>Use client components when you need useState...</p>
<!-- Section 2 -->
<h2>2. Advanced Routing</h2>
</main>Check Your Knowledge
Test your understanding of Heading Hierarchy with these quick questions.