HTML Headings

Master the art of organizing content with proper heading hierarchy from H1 to H6!

🎯 Semantic Structure

♿ Accessibility First

📊 SEO Optimization

Quick Navigation

📊 Hierarchy 👀 Visual Guide 💡 Examples 🎮 Playground

What are HTML Headings?

HTML headings are tags from <h1> to <h6> used to define headings and subheadings on a webpage.

🎯 Why Headings Matter:

📖Content Structure - Organize your content logically
🔍SEO - Help search engines understand your content
♿Accessibility - Screen readers use headings for navigation
👁️User Experience - Guide readers through your content

🏷️

The Heading Family

Six levels of headings create a clear content hierarchy

<h1>Level 1

<h2>Level 2

<h3>Level 3

<h4>Level 4

<h5>Level 5

<h6>Level 6

📊 Heading Hierarchy & Structure

Proper Heading Structure

✅ Correct Structure:

<h1>Main Title</h1>
  <h2>Chapter 1</h2>
    <h3>Section 1.1</h3>
    <h3>Section 1.2</h3>
  <h2>Chapter 2</h2>
    <h3>Section 2.1</h3>
      <h4>Subsection 2.1.1</h4>

❌ Incorrect Structure:

<h1>Main Title</h1>
  <h3>Skipped H2!</h3>
  <h2>Wrong order</h2>
    <h4>Skipped H3!</h4>

💡 Best Practice:

Always maintain a logical hierarchy. Never skip heading levels (e.g., don't go from H1 to H3). Think of headings like a book's table of contents!

👀 Visual Heading Guide

Heading Size Comparison

Heading 148px

H1 - Main Title

Heading 248px

H2 - Section

Heading 336px

H3 - Sub-section

Heading 424px

H4 - Detail

Heading 520px

H5 - Minor

Heading 618px

H6 - Smallest

Visual Hierarchy

Main Document Title

Primary Section

Sub-section A

Detailed Point 1

Minor Note

Fine Print

📖 Reading Flow

Notice how your eyes naturally follow the hierarchy from largest to smallest, creating a clear content structure that's easy to follow.

💡 Detailed Heading Examples

H1 - Main Title

The most important heading, used for the main page title

Code Example:

<h1>Welcome to My Website</h1>

Live Example:

Welcome to My Website

Use ONLY ONE H1 per page for the main title

✅ Do:

Use for the primary page title, make it descriptive and unique

❌ Don't:

Don't use multiple H1s or for non-title content

H2 - Section Headings

Major section headings that follow the H1

Code Example:

<h2>About Our Company</h2>

Live Example:

About Our Company

Use for main sections of your content

✅ Do:

Use for major content sections, can have multiple per page

❌ Don't:

Don't skip from H1 to H3 without using H2 first

H3 - Sub-sections

Sub-headings under H2 sections

Code Example:

<h3>Our Mission Statement</h3>

Live Example:

Our Mission Statement

Use for sub-sections within H2 content

✅ Do:

Use to break down H2 sections into smaller parts

❌ Don't:

Don't use as a direct child of H1

H4 - Detailed Sub-sections

Further breakdown under H3 sections

Code Example:

<h4>Team Members</h4>

Live Example:

Team Members

Use for detailed breakdown under H3

✅ Do:

Use for fine-grained content organization

❌ Don't:

Don't use without proper H3 parent section

H5 - Minor Headings

Less important headings, rarely used

Code Example:

<h5>Additional Notes</h5>

Live Example:

Additional Notes

Use for minor points or footnotes

✅ Do:

Use sparingly for very specific sub-points

❌ Don't:

Don't use for major content sections

H6 - Least Important

The smallest heading level, used very rarely

Code Example:

<h6>Copyright Information</h6>

Live Example:

Copyright Information

Use for the least important headings

✅ Do:

Use for legal text, copyrights, or fine print

❌ Don't:

Don't use for any significant content

♿ Accessibility Matters

Screen Reader Experience

✅ Good Heading Structure

<h1>Web Development Guide</h1>
  <h2>HTML Basics</h2>
    <h3>Understanding Tags</h3>
    <h3>Attributes</h3>
  <h2>CSS Fundamentals</h2>
    <h3>Selectors</h3>
    <h3>Properties</h3>

Screen Reader Output: "Heading level 1: Web Development Guide. Heading level 2: HTML Basics. Heading level 3: Understanding Tags..."

❌ Poor Heading Structure

<h1>Web Development Guide</h1>
  <h3>Skipped H2!</h3>
  <div class="big-text">Looks like heading</div>
  <h2>Wrong order</h2>
    <h4>Skipped H3!</h4>

Screen Reader Output: "Heading level 1: Web Development Guide. Heading level 3: Skipped H2! [Confusing jump]. Big text [No heading announced]..."

🎯

Navigation

Users jump between headings

📖

Understanding

Context through hierarchy

⚡

Efficiency

Quick content scanning

🎮 Heading Playground

Customize Headings

Edit the heading text and see changes in real-time:

H1:

H2:

H3:

H4:

H5:

H6:

💡 Experiment Ideas:

• Try making headings more descriptive
• Test how different lengths affect readability
• Notice the visual hierarchy with your own content

Live Preview

Welcome to My Website

About Our Services

Why Choose Us

Key Features

Additional Information

Contact Details

Generated HTML Code:

<h1>Welcome to My Website</h1>
<h2>About Our Services</h2>
<h3>Why Choose Us</h3>
<h4>Key Features</h4>
<h5>Additional Information</h5>
<h6>Contact Details</h6>

🔍 SEO & Headings

🎯

One H1 Per Page

Use only one H1 tag per page for the main title. This helps search engines understand your primary content.

📊

Keyword Placement

Include relevant keywords in your headings, but keep them natural and user-friendly.

🏗️

Content Structure

Proper heading hierarchy helps search engines crawl and index your content effectively.

🚀 SEO Best Practices:

• Use descriptive, keyword-rich headings that accurately describe the content
• Maintain consistent heading structure across your website
• Avoid using headings just for styling - use CSS for visual effects
• Keep headings concise and scannable

💡 Common Mistakes & Pro Tips

🚫 Common Mistakes

❌

Skipping Heading Levels

Jumping from H1 to H3 without using H2 breaks the logical structure.

❌

Multiple H1 Tags

Using more than one H1 per page confuses SEO and accessibility tools.

❌

Using Headings for Style

Don't use heading tags just to make text bigger - use CSS instead.

❌

Empty Headings

Headings without content provide no value and can confuse users.

✅ Pro Tips

💡

Plan Your Structure

Outline your content hierarchy before writing HTML.

💡

Be Descriptive

Use clear, descriptive text that summarizes the following content.

💡

Keep It Concise

Headings should be brief and scannable - avoid long sentences.

💡

Test with Screen Readers

Verify your heading structure works well with accessibility tools.

Ready to Learn More?

📝