How to Use Heading Tags Correctly?

What You'll Learn

• Heading hierarchy h1-h6
• Rules for proper usage
• Accessibility and SEO impact

Understanding Headings

HTML provides six heading levels: <h1> through <h6>. They create a hierarchical document outline.

• h1 - Most important (main title)
• h6 - Least important

Important Rules

1. One h1 per page - The main topic
2. Don't skip levels - h1 → h3 is wrong
3. Structure not styling - Use CSS for visual size

Correct Example

<h1>Main Page Title</h1>

<h2>First Major Section</h2>
<p>Content...</p>

<h3>Subsection</h3>
<p>Content...</p>

<h2>Second Major Section</h2>
<p>Content...</p>

Wrong Examples

<!-- Wrong: Skipping levels -->
<h1>Title</h1>
<h3>This skips h2!</h3>

<!-- Wrong: Using heading for styling -->
<h4>Use a <p> with CSS instead</h4>

Why It Matters

• Screen readers use headings to navigate
• Search engines understand content structure
• Improves accessibility and SEO