HTML Headings (h1–h6): Structure Pages with Semantic Text

HTML headings organize content into a clear hierarchy, making pages easier to read for people, screen readers, and search engines. This article explains how h1 through h6 work, how to choose the right level, and how to avoid common heading structure mistakes.

Quick answer: Use h1 for the main page topic, then use h2 through h6 to divide the content into nested sections. Headings should describe structure, not text size.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, how paragraphs work, and the idea that a web page is made of nested sections.

1. What Are HTML Headings?

HTML headings are the six section headings in HTML, from h1 to h6. They mark the importance and nesting of content instead of just changing how large text looks on screen.

h1 is the top-level heading for the page or main article.
h2 starts major sections under the main topic.
h3 through h6 create deeper sub-sections.
Headings help browsers, assistive technologies, and search tools understand page structure.

In practice, headings create an outline for your content. A well-structured outline makes long pages much easier to scan and navigate.

2. Why HTML Headings Matter

Headings are important because they turn a wall of text into a document with a clear structure. Readers can quickly find the section they need, and screen readers can jump between headings to move through the page efficiently.

They also improve content maintenance. When you organize content with headings, it becomes easier to edit, expand, and reuse sections without losing the page’s structure.

They improve readability for everyone.
They support accessibility by exposing a navigation structure.
They make long-form content easier to skim.
They help define the topic hierarchy of a page.

3. Basic Syntax or Core Idea

The syntax for headings is simple: use one of the heading elements and place the heading text inside it. The number indicates the heading level, not the font size you should expect.

Minimal heading example

This example shows a main heading followed by a section heading and a paragraph.

<h1>Page Title</h1>
<h2>Section Title</h2>
<p>This paragraph belongs to the section above.</p>

The h1 introduces the whole page, and h2 introduces a section beneath it. The paragraph belongs to the section, so it follows that heading.

How heading levels work

Each heading level represents a lower level in the document outline.

<h1>Main Topic</h1>
<h2>First Major Section</h2>
<h3>Subsection</h3>
<h4>Smaller Detail</h4>

This structure shows nesting. Use the lowest heading level that matches the content’s place in the hierarchy.

4. Step-by-Step Examples

Example 1: Simple article structure

Start with one top-level heading, then divide the article into major sections with h2 elements.

<article>
  <h1>How to Grow Tomatoes</h1>
  <h2>Choosing the Right Soil</h2>
  <p>Tomatoes grow best in rich, well-drained soil.</p>
  <h2>Watering Schedule</h2>
  <p>Water consistently to avoid stress and split fruit.</p>
</article>

This layout gives the page one clear topic and two major sections under it.

Example 2: Nested subtopics

Use deeper heading levels when a section needs smaller subsections.

<h1>Travel Guide to Lisbon</h1>
<h2>Where to Stay</h2>
<h3>Best Areas for First-Time Visitors</h3>
<h3>Budget Accommodation Options</h3>
<h2>What to Eat</h2>

The h3 elements belong to the h2 section above them. This is the correct way to show subtopics.

Example 3: Skip heading levels only when structure still makes sense

In most cases, move one level at a time. If your content is complex, it is still better to keep the hierarchy logical rather than choosing heading levels by appearance.

<h1>Cooking Basics</h1>
<h2>Kitchen Safety</h2>
<h3>Handling Knives</h3>
<h3>Using Heat Safely</h3>

The headings match the content hierarchy, which is what matters most for semantics and accessibility.

Example 4: Headings inside semantic sections

Headings work especially well inside elements like section, article, and aside.

<section>
  <h2>Customer Reviews</h2>
  <article>
    <h3>Great for beginners</h3>
    <p>This product was easy to use and well documented.</p>
  </article>
</section>

This example shows how headings label content within semantic containers, making the page structure clearer.

5. Practical Use Cases

Headings are useful anywhere content needs structure. They are especially valuable on pages that are meant to be read, scanned, or navigated by section.

Blog posts and documentation pages with multiple sections
Landing pages that explain features in blocks
Help articles and knowledge base entries
Product pages with feature lists and support details
Dashboards or portal pages with grouped content areas

When the content is short and simple, you may only need one heading and one paragraph. When the page becomes longer, headings become essential.

6. Common Mistakes

Mistake 1: Using headings only for visual size

Headings should describe structure, not be chosen just because they look big or bold. Styling should not determine semantic level.

Problem: This code uses a lower heading level for a main title just because the designer wants smaller text. That makes the document outline misleading for screen readers and search tools.

<h3>Welcome to Our Site</h3>
<p>Learn more about our services below.</p>

Fix: Use the correct heading level for the content hierarchy, then change the visual style with CSS if needed.

<h1>Welcome to Our Site</h1>
<p>Learn more about our services below.</p>

The corrected version works because the heading level reflects the page structure instead of the text size.

Mistake 2: Skipping directly from h1 to h4

Jumping over heading levels makes the outline harder to follow. This is a common source of confusion in assistive technologies and content audits.

Problem: The structure moves from a top-level heading directly to a much deeper level, which makes the hierarchy feel broken.

<h1>Recipe Collection</h1>
<h4>Breakfast Recipes</h4>

Fix: Move through the levels in a logical order unless there is a very specific, documented reason not to.

<h1>Recipe Collection</h1>
<h2>Breakfast Recipes</h2>

The corrected version preserves a clear hierarchy that is easier to understand.

Mistake 3: Repeating the same heading for unrelated sections

Headings should describe the content that follows them. Reusing the same label for unrelated blocks makes navigation less useful.

Problem: These headings do not tell the reader how the sections differ, so the page becomes harder to scan.

<h2>Details</h2>
<p>Shipping information and returns policy.</p>
<h2>Details</h2>
<p>Warranty terms and support contact information.</p>

Fix: Use descriptive headings that clearly distinguish each section.

<h2>Shipping and Returns</h2>
<p>Shipping information and returns policy.</p>
<h2>Warranty and Support</h2>
<p>Warranty terms and support contact information.</p>

The corrected version gives each section a meaningful name, which improves navigation and comprehension.

7. Best Practices

Practice 1: Use one clear main heading

Most pages should have one main heading that describes the page topic. This gives both users and assistive tools a strong anchor for the rest of the content.

<h1>Beginner Guide to Indoor Plants</h1>

A single, descriptive main heading makes the page immediately understandable.

Practice 2: Keep heading text concise and specific

Headings work best when they are short enough to scan but specific enough to be meaningful.

<h2>Choosing a Pot</h2>
<h2>Watering Schedule</h2>

These headings are easier to scan than long sentences and still tell the reader what the section covers.

Practice 3: Match heading levels to content nesting

If one topic is a subtopic of another, use a deeper heading level. This keeps the page outline accurate and predictable.

<h2>Lighting</h2>
<h3>Low-Light Plants</h3>
<h3>Bright-Light Plants</h3>

This approach makes the relationship between sections obvious without needing extra explanation.

8. Limitations and Edge Cases

Heading levels do not control visual size by default; browsers apply their own default styling.
Some pages may have more than one top-level section heading if each section is independent, but most pages still benefit from one clear main topic.
Headings should not be used for decorative text or labels that are not actually section titles.
Screen readers often use headings for navigation, so vague labels like “More” or “Info” can be frustrating.
A heading without related content is usually a sign that the structure needs revision.

A good heading should answer the question: “What does this section contain?” If it does not, it probably needs to be rewritten.

9. Practical Mini Project

Here is a small, complete example of a page with a clear heading hierarchy. It shows how headings can organize a short article into understandable sections.

<article>
  <h1>How to Prepare a Simple Salad</h1>

  <section>
    <h2>Ingredients</h2>
    <ul>
      <li>Lettuce</li>
      <li>Tomatoes</li>
      <li>Cucumber</li>
    </ul>
  </section>

  <section>
    <h2>Instructions</h2>
    <h3>Step 1: Wash the vegetables</h3>
    <p>Rinse everything under cold water.</p>

    <h3>Step 2: Chop and mix</h3>
    <p>Cut the vegetables into bite-sized pieces and combine them.</p>
  </section>
</article>

This example uses a single h1 for the page topic, h2 for major sections, and h3 for steps inside the instructions section.

10. Key Points

HTML headings create structure, not just bigger text.
h1 marks the main topic of the page.
h2 through h6 represent nested sections.
Good headings improve accessibility, readability, and content navigation.
Choose heading levels based on meaning, not appearance.

11. Practice Exercise

Rewrite this outline into proper HTML headings:

Main topic: “Learn Guitar”
Section: “Choosing a Guitar”
Subsection: “Acoustic vs Electric”
Section: “First Chords”

Expected output: A logical heading hierarchy with one h1, two h2 sections, and one h3 under the guitar choice section.

Hint: Put the most important topic at the highest level, then move down one level at a time for nested content.

Solution:

<h1>Learn Guitar</h1>
<h2>Choosing a Guitar</h2>
<h3>Acoustic vs Electric</h3>
<h2>First Chords</h2>

12. Final Summary

HTML headings are one of the simplest and most important tools for building well-structured web content. They tell browsers and assistive technologies how the page is organized, and they help readers scan long content quickly.

The main idea is to use heading levels for meaning, not style. Choose h1 for the page’s top-level topic, then use h2 through h6 to show nested sections in a logical order.

Once you are comfortable with headings, the next step is to learn how semantic sectioning elements like article, section, and aside work together with heading structure.