Heading Structure

Understanding Heading Structure

HTML headings organize webpage content into a meaningful hierarchy that helps visitors scan information and helps search engines understand the subjects and sections of a page.

HTML provides six heading levels, from <h1> through <h6>. Using these levels according to the structure of the content creates a logical outline instead of choosing headings simply for their appearance.

HTML Heading Elements

HTML provides six levels of headings. The <h1> element represents the highest-level heading, followed by <h2>, <h3>, and continuing through <h6>.

<h1>Growing Tomatoes</h1>
<h2>Planting Tomatoes</h2>
<h3>Choosing a Location</h3>
<h3>Preparing the Soil</h3>
<h2>Caring for Tomato Plants</h2>
<h3>Watering</h3>
<h3>Supporting the Plants</h3>

The heading levels show how sections relate to one another. The <h3> headings are subsections of the preceding <h2>, while the <h2> sections belong beneath the main <h1> subject.

Headings and SEO

Headings help search engines interpret the organization and subjects of visible page content. A descriptive heading can provide context about the information that follows it and show how that information relates to other sections of the page.

Headings are only one part of how a search engine understands content. They work together with the page title, paragraphs, links, images, document structure, and other information rather than acting as a shortcut to higher rankings.

The primary reason to use headings correctly is to make content easier to understand and navigate. That clear organization can also make the page easier for search engines to interpret.

The Main <h1> Heading

The <h1> normally identifies the primary subject of the page's main content. Visitors should be able to read it and quickly understand what the page is about.

<h1>Growing Tomatoes in Containers</h1>

Vague headings provide less useful information:

<h1>Welcome</h1>

For a tutorial or informational page, a descriptive main heading usually provides a clearer introduction to the content than generic wording such as Welcome, Information, or Our Page.

Create a Logical Heading Hierarchy

Heading levels should reflect the organization of the content. Major sections under the main heading normally use <h2>, while subsections within those sections use <h3>.

<h1>Vegetable Gardening</h1>

<h2>Planning the Garden</h2>
<h3>Choosing a Location</h3>
<h3>Planning the Layout</h3>

<h2>Planting Vegetables</h2>
<h3>Preparing the Soil</h3>
<h3>Planting Seeds</h3>

Avoid choosing a lower heading level simply because its default appearance is smaller. The heading level should represent the section's position in the content hierarchy.

Write Descriptive Headings

Headings should briefly describe the content they introduce. Visitors often scan headings before deciding which sections they want to read.

A vague heading such as this provides little context:

<h2>More Information</h2>

A descriptive heading identifies the subject immediately:

<h2>Watering Tomato Plants</h2>

Descriptive headings also make it easier for search engines and assistive technologies to understand how information is organized throughout the document.

Do Not Choose Headings by Size

Browsers apply different default font sizes to heading levels, but visual size should not determine which heading element you use.

For example, do not use an <h4> when the content logically requires an <h2> simply because the default <h4> text looks closer to the size you want.

<h2 class="section-heading">Watering Tomato Plants</h2>

Use CSS to control font size, weight, spacing, color, and other visual properties while preserving the correct semantic heading level in the HTML.

Multiple <h1> Elements

HTML allows more than one <h1> element in a document, and having multiple <h1> elements is not automatically an SEO error.

However, using one clear <h1> for the primary page subject is usually the simplest structure for ordinary webpages and makes the content hierarchy easier to understand.

Additional major sections can normally use <h2> headings, with lower levels used as needed for subsections.

<h1>Growing Tomatoes</h1>

<h2>Planting</h2>
<h2>Watering</h2>
<h2>Feeding</h2>
<h2>Harvesting</h2>

Page Title and Main Heading

The document <title> and the visible <h1> have different purposes, but both should accurately represent the same page.

<head>
  <title>Growing Tomatoes - Beginner Gardening Guide</title>
</head>

<body>
  <main>
    <h1>Growing Tomatoes</h1>
  </main>
</body>

The wording does not need to match exactly. The title can include additional information useful in browser tabs or search results while the main heading provides a natural introduction to the visible content.

Use Relevant Words Naturally

Heading text should use words that accurately describe the section. There is no need to force the same keyword or phrase into every heading.

An unnatural structure might look like:

<h1>Growing Tomatoes</h1>
<h2>Growing Tomatoes Watering Tips</h2>
<h2>Growing Tomatoes Feeding Tips</h2>
<h2>Growing Tomatoes Harvesting Tips</h2>

Natural headings are clearer:

<h1>Growing Tomatoes</h1>
<h2>Watering Tomato Plants</h2>
<h2>Fertilizing and Feeding</h2>
<h2>When to Harvest Tomatoes</h2>

Write headings to help people understand and navigate the content rather than repeating phrases solely for search engines.

Headings and Accessibility

A logical heading structure is also important for accessibility. Screen reader users can navigate between headings to scan a document and move directly to sections that interest them.

Heading text should therefore make sense when encountered during navigation and heading levels should reflect the relationships between sections.

This is another area where accessibility and SEO benefit from the same underlying practice: organizing content clearly with semantic HTML.

Common Heading Mistakes

Heading Structure Example

The following example shows a simple page with a clear hierarchy of topics and subsections.

<main>
  <h1>Growing Tomatoes</h1>

  <p>Learn how to plant, care for, and harvest tomato plants.</p>

  <h2>Planting Tomatoes</h2>

  <h3>Choosing a Location</h3>
  <p>Choose a location that receives plenty of sunlight.</p>

  <h3>Preparing the Soil</h3>
  <p>Tomatoes grow best in fertile, well-drained soil.</p>

  <h2>Caring for Tomato Plants</h2>

  <h3>Watering</h3>
  <p>Water consistently and direct the water toward the soil.</p>

  <h3>Supporting Plants</h3>
  <p>Use stakes or cages to support plants as they grow.</p>

  <h2>Harvesting Tomatoes</h2>

  <p>Harvest tomatoes when they reach the desired color and ripeness.</p>
</main>

Experiment with the heading levels in the editor and notice how changing an element changes both its semantic level and its default browser appearance.

Best Practices

• Use headings to represent the actual organization of the content.
• Give the page a clear main heading that identifies its primary subject.
• Use <h2> headings for major sections beneath the main heading and lower levels for appropriate subsections.
• Write headings that clearly describe the information that follows.
• Use CSS rather than heading levels to control visual appearance.
• Avoid unnecessary repetition of keywords and phrases.
• Keep the page title, main heading, and visible content consistent in subject.
• Use actual HTML heading elements rather than styling ordinary text to look like headings.
• Maintain a logical hierarchy that helps both visual and assistive-technology users navigate the page.

Summary

HTML headings create a hierarchy that organizes webpage content into understandable sections and subsections. A clear structure helps visitors scan information, supports screen reader navigation, and gives search engines useful context about the organization of a page.

Choose heading levels according to meaning rather than appearance, write descriptive heading text, and keep the main heading consistent with the page's overall subject. Next, we will look at creating descriptive and SEO-friendly URLs.