Think of HTML headings like the table of contents in a book. Just as a book has chapter titles, section titles, and subsection titles, your webpage needs headings to organize content in a clear, logical way.

What Are HTML Headings?

HTML headings are special tags that create titles and subtitles on your webpage. They range from <h1> (the biggest and most important) to <h6> (the smallest). These headings help both visitors and search engines understand how your content is organized.

The Six Heading Levels

HTML gives you six different heading sizes to work with:

JavaScript

<h1>This is Heading 1 - The Main Title</h1>
<h2>This is Heading 2 - Major Section</h2>
<h3>This is Heading 3 - Subsection</h3>
<h4>This is Heading 4 - Minor Section</h4>
<h5>This is Heading 5 - Small Heading</h5>
<h6>This is Heading 6 - Smallest Heading</h6>

How They Look on Your Page

When you use these headings, here's how they appear:

H1 - Largest and Bold (Usually used once per page)
H2 - Large and Bold (Main sections)
H3 - Medium-Large and Bold (Subsections)
H4 - Medium and Bold (Minor sections)
H5 - Small and Bold (Smaller sections)
H6 - Smallest and Bold (Tiny sections)

Understanding Heading Hierarchy

Heading hierarchy is like building a pyramid - you start with the most important information at the top and work your way down to specific details.

Visual Hierarchy Structure

JavaScript

H1 - Main Page Title (Only one per page)
├── H2 - First Major Section
│   ├── H3 - Subsection of H2
│   │   └── H4 - Details under H3
│   └── H3 - Another Subsection
├── H2 - Second Major Section
│   ├── H3 - Subsection of second H2
│   └── H3 - Another Subsection
└── H2 - Third Major Section

Real-World Example: Blog Post Structure

Let's see how headings work in a typical blog post about cooking:

JavaScript

<h1>Ultimate Guide to Baking Chocolate Chip Cookies</h1>

<h2>Ingredients You'll Need</h2>
<p>Before we start baking, let's gather all our ingredients...</p>

<h3>Dry Ingredients</h3>
<p>These form the base of your cookie dough...</p>

<h3>Wet Ingredients</h3>
<p>These ingredients add moisture and flavor...</p>

<h2>Step-by-Step Instructions</h2>
<p>Now let's walk through the baking process...</p>

<h3>Preparing Your Dough</h3>
<p>Start by mixing the dry ingredients in a large bowl...</p>

<h4>Mixing Tips</h4>
<p>Here are some professional tips for perfect mixing...</p>

<h3>Baking Your Cookies</h3>
<p>Preheat your oven to 375°F and follow these steps...</p>

<h2>Troubleshooting Common Problems</h2>
<p>Sometimes cookies don't turn out perfect. Here's how to fix common issues...</p>

The Golden Rules of Heading Hierarchy

Rule 1: Use Only One H1 Per Page

Your <h1> tag is like the title of a book - there should be only one main title per page.

JavaScript

<!-- ✅ CORRECT -->
<h1>My Amazing Website</h1>

<!-- ❌ WRONG - Don't use multiple H1 tags -->
<h1>My Amazing Website</h1>
<h1>Another Main Title</h1>

Rule 2: Don't Skip Heading Levels

Follow the natural order: H1 → H2 → H3 → H4 → H5 → H6

JavaScript

<!-- ✅ CORRECT -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

<!-- ❌ WRONG - Don't jump from H1 to H3 -->
<h1>Main Title</h1>
<h3>This skips H2</h3>

Rule 3: Use Headings for Structure, Not Styling

Don't choose headings based on how big you want the text to look. Use CSS for styling instead.

JavaScript

<!-- ✅ CORRECT - Using headings for structure -->
<h2>Important Section</h2>
<p>This is regular paragraph text</p>

<!-- ❌ WRONG - Using H1 just for big text -->
<h1>This isn't really a main title, just big text</h1>

Practical Example: Complete Webpage Structure

Here's how a well-structured webpage looks:

JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Sarah's Photography Portfolio</title>
</head>
<body>
    <h1>Sarah's Photography Portfolio</h1>
    <p>Welcome to my creative world of photography!</p>
    
    <h2>About Me</h2>
    <p>I'm a professional photographer with 5 years of experience...</p>
    
    <h2>My Services</h2>
    <p>I offer various photography services for different occasions.</p>
    
    <h3>Wedding Photography</h3>
    <p>Capture your special day with beautiful, timeless photos...</p>
    
    <h4>Wedding Packages</h4>
    <p>Choose from our three different wedding packages...</p>
    
    <h3>Portrait Photography</h3>
    <p>Professional headshots and family portraits...</p>
    
    <h3>Event Photography</h3>
    <p>Corporate events, parties, and special celebrations...</p>
    
    <h2>Contact Information</h2>
    <p>Ready to book your session? Get in touch!</p>
</body>
</html>

Why Heading Hierarchy Matters

For Your Website Visitors

Easy Navigation: People can quickly scan your page and find what they need
Better Reading Experience: Clear structure makes content easier to follow
Screen Reader Support: People who are blind or have vision difficulties rely on screen readers that use your headings like a roadmap to jump between different sections of your page.

For Search Engines

Better SEO: Search engines use headings to understand your content topics
Featured Snippets: Well-structured headings help your content appear in Google's featured snippets
Page Ranking: Proper heading hierarchy can improve your search rankings

Common Beginner Mistakes

Mistake 1: Using Multiple H1 Tags

JavaScript

<!-- ❌ WRONG -->
<h1>Welcome</h1>
<h1>About Us</h1>
<h1>Services</h1>

<!-- ✅ CORRECT -->
<h1>Welcome to Our Website</h1>
<h2>About Us</h2>
<h2>Services</h2>

Mistake 2: Choosing Headings by Size

JavaScript

<!-- ❌ WRONG - Choosing H4 because you want smaller text -->
<h1>Main Title</h1>
<h4>This should be H2 but I want smaller text</h4>

<!-- ✅ CORRECT - Use proper hierarchy, style with CSS -->
<h1>Main Title</h1>
<h2 style="font-size: 18px;">Properly structured section</h2>

Mistake 3: Using Headings for Styling

JavaScript

<!-- ❌ WRONG - Using headings to make text bold -->
<h3>This isn't a heading, just bold text</h3>

<!-- ✅ CORRECT - Use proper tags for styling -->
<p><strong>This is properly bolded text</strong></p>

Quick Reference: When to Use Each Heading

Heading	Best Used For	Example
<h1>	Page title, main topic	"Complete Guide to HTML"
<h2>	Major sections	"Getting Started", "Advanced Topics"
<h3>	Subsections within H2	"Setting Up Your Editor"
<h4>	Minor sections within H3	"Installing Extensions"
<h5>	Small subsections	"Troubleshooting Tips"
<h6>	Tiny details	"Additional Notes"

Testing Your Heading Structure

Here's a simple way to check if your headings make sense:

Remove all other content and look at just your headings
Ask yourself: Does this create a logical outline?
Check the flow: Can someone understand your page structure from headings alone?

Example of good heading outline:

JavaScript

H1: How to Start a Garden
  H2: Planning Your Garden
    H3: Choosing the Right Location
    H3: Selecting Your Plants
  H2: Preparing the Soil
    H3: Testing Soil Quality
    H3: Adding Nutrients
  H2: Planting and Maintenance

What's Next?

Now that you understand HTML headings and hierarchy, you're ready to create well-structured web pages that both users and search engines will love. Practice creating different page structures and always remember to think about your content organization before you start coding.

In our next lesson, we'll explore how to style these headings with CSS to make them look exactly how you want while maintaining proper structure.