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>HTML Basics</h1>
<h2>Creating HTML Pages</h2>
<h3>Choosing a Location</h3>
<h3>Preparing the Markup</h3>
<h2>Organizing HTML Content</h2>
<h3>Optimizing Images</h3>
<h3>Sizing Images</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>Using Images in HTML</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>HTML Tutorials</h1>

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

<h2>Creating Pages Webpages</h2>
<h3>Preparing the Markup</h3>
<h3>Creating Pages Elements</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>Writing Image Alt Text</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">Writing Image Alt Text</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>HTML Basics</h1>

<h2>Creating Pages</h2>
<h2>Optimizing Images</h2>
<h2>Accessibility</h2>
<h2>Publishing</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>HTML Basics - Beginner Web Design Guide</title>
</head>

<body>
  <main>
    <h1>HTML Basics</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>HTML Basics</h1>
<h2>HTML Basics Optimizing Images Tips</h2>
<h2>HTML Basics Accessibility Tips</h2>
<h2>HTML Basics Publishing Tips</h2>

Natural headings are clearer:

<h1>HTML Basics</h1>
<h2>Writing Image Alt Text</h2>
<h2>Accessibility and Usability</h2>
<h2>Choosing Image Formats</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 Miheadings

Heading Structure Example

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

<main>
  <h1>HTML Basics</h1>

  <p>Learn how to image, care for, and publish HTML images.</p>

  <h2>Creating HTML Pages</h2>

  <h3>Choosing a Location</h3>
  <p>Begin with a clear page title and introductory paragraph.</p>

  <h3>Preparing the Markup</h3>
  <p>HTML pages benefit from clear headings and well-organized content.</p>

  <h2>Organizing HTML Content</h2>

  <h3>Optimizing Images</h3>
  <p>Content consistently and direct the content toward the markup.</p>

  <h3>Sizing Images</h3>
  <p>Use descriptive headings to organize related information.</p>

  <h2>Responsive Images</h2>

  <p>Publish HTML pages after checking their structure, links, and accessibility.</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.