Proper Use of Headings: Structure, Semantics, and Search Power

HTML headings do more than just “make text big.” They define the architecture of your content. Done right, they guide readers, support accessibility tools like screen readers, and help search engines understand your page. Let’s dive into how to use <h1> to <h6> with purpose and precision.

1. The Heading Hierarchy (h1 to h6)

HTML provides six heading levels:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Deeper Detail</h5>
<h6>Minor Note</h6>

Think of them like a nested outline. Use them in logical order — <h2> should follow an <h1>, <h3> follows <h2>, and so on.

2. Semantic Importance of Headings

Headings give meaning. They tell both readers and machines what your content is *about*. This is not just a styling trick — it’s structural HTML.

Good Example:

<h1>Fruit Encyclopedia</h1>

<h2>Apples</h2>
<h3>Varieties of Apples</h3>
<h3>Health Benefits</h3>

<h2>Bananas</h2>
<h3>Storage Tips</h3>

<h2>Cherries</h2>
<h3>Sweet vs Tart</h3>

[ Screen readers and search engines can now "understand" the page’s outline. ]

3. Only One h1 Per Page

Your <h1> is the main heading — the title of the page’s content. You should use it only once to avoid confusing hierarchy and dilute SEO relevance.

<h1>Welcome to Cherry Grove Farm</h1>

Why it matters:

• SEO: Search engines use <h1> as a strong signal of what the page is about.
• Accessibility: Screen readers often announce it first.

4. Styling vs Structure: Don't Fake Headings

Never use a <div> or <span> styled like a heading just for appearance. This breaks structure and hinders accessibility.

Bad Example:

<div style="font-size: 24px; font-weight: bold;">Banana Health Tips</div>

Correct Version:

<h2>Banana Health Tips</h2>

[ Screen reader announces heading level 2, aiding navigation. ]

5. Headings Help SEO

Search engines use heading tags to determine topic hierarchy and keyword relevance. Properly marked-up headings:

• Boost keyword visibility when headings match user queries
• Make your content more scannable and digestible
• Encourage rich snippets in search results

6. Practical Use Case: A Fruit Info Page

<h1>Fruit Facts for Beginners</h1>

<h2>Apples</h2>
<h3>Popular Types</h3>
<h3>When to Harvest</h3>

<h2>Bananas</h2>
<h3>Ripening Stages</h3>

<h2>Cherries</h2>
<h3>Sweet vs Tart Varieties</h3>
<h3>Best Growing Conditions</h3>

[ This heading hierarchy creates a rich, SEO-friendly, and accessible document outline. ]

Summary

Headings give your content backbone. They tell search engines what’s important and help users (especially those using assistive tech) navigate effortlessly. You now understand how to:

• Use h1 through h6 in proper hierarchy
• Choose headings for structure, not just styling
• Write headings that are meaningful and SEO-aligned

What’s Next?

Next up: We’ll create a sample landing page using proper heading structure, semantic HTML, and meta tags — a fully optimized foundation for content-rich, accessible web design.