HTML Headings

Heading tags give content a clear hierarchy, which is crucial for both user experience and search engines.

What Are Heading Tags

HTML provides six levels of heading tags, from <h1> to <h6>. <h1> represents the highest level (most important), and <h6> represents the lowest level (least important). Heading tags are displayed in bold by default, with font sizes decreasing from h1 to h6.

The semantic meaning of headings far outweighs their visual appearance. Search engines and assistive technologies (such as screen readers) rely on heading tags to understand the content structure of a page. Therefore, using headings correctly is critical for SEO (Search Engine Optimization) and accessibility.

<h1>Level-1 Heading (Most Important)</h1>
<h2>Level-2 Heading</h2>
<h3>Level-3 Heading</h3>
<h4>Level-4 Heading</h4>
<h5>Level-5 Heading</h5>
<h6>Level-6 Heading (Least Important)</h6>

In the example above, the browser automatically applies different font sizes and bold styling to each heading. But remember: don't use heading tags just to change font size — use CSS to control text styling. The job of heading tags is to convey content hierarchy.

Heading Usage Guidelines

Although heading tags are simple to use, several important guidelines should be followed in practice:

• Each page should have only one <h1>: <h1> represents the core topic of the page, typically used for the page title or site logo. Search engines use the <h1> content as a key signal for understanding the page's subject.
• Heading levels should not skip: Don't jump directly from <h1> to <h3>. Skipping levels breaks the coherence of the document structure and negatively impacts SEO and accessibility.
• Proper heading usage can improve search engine rankings: Search engines analyze keywords in heading tags. A well-organized heading hierarchy helps search engines better understand page content, potentially leading to better rankings.

<!-- Correct heading hierarchy -->
<h1>Site Title</h1>
  <h2>Article Category</h2>
    <h3>Subcategory One</h3>
    <h3>Subcategory Two</h3>
  <h2>Related Content</h2>

<!-- Incorrect heading hierarchy (skipping levels) -->
<h1>Site Title</h1>
  <h3>Skipping h2, using h3 directly</h3>  <!-- h2 is missing here -->
    <h6>Jumping from h3 to h6, too big a leap</h6>

Default Heading Styles

Browsers have built-in font sizes and weights for each heading level. Let's see the actual display of h1~h6 in the browser:

You can tell at a glance: h1 is the largest and most prominent, while h6 is the smallest. These are the browser's default heading styles. There may be minor differences between browsers, but the overall hierarchical relationship is consistent.

Of course, these default styles can easily be overridden with CSS. In real projects, developers typically reset the browser's default styles and then redefine heading properties such as font size, color, and spacing based on the design specifications.

/* CSS custom heading styles */
h1 { font-size: 28px; color: #333; }
h2 { font-size: 22px; color: #555; }
h3 { font-size: 18px; color: #777; }

Headings and Page Outline

When you set up a heading hierarchy for a page, browsers and search engines generate a "table of contents" for it — this is called the document outline. Think of heading tags like "heading styles" in a Word document: a proper heading hierarchy automatically generates a clear table of contents structure.

For screen reader users, the heading hierarchy is their navigation map within the page. A good heading structure allows visually impaired users to quickly jump to any section, much like reading a table of contents. If the heading hierarchy is chaotic, they'll struggle to understand how the page content is organized.

For search engines, keywords in headings are important signals for understanding the page's topic. Search engines give higher weight to pages that use heading tags properly.

<!-- Blog post heading outline structure -->
<h1>How to Learn Frontend Development</h1>
  <h2>1. The Frontend Trio</h2>
    <h3>HTML — Structure</h3>
    <h3>CSS — Styling</h3>
    <h3>JavaScript — Interactivity</h3>
  <h2>2. Learning Path</h2>
    <h3>Beginner Level</h3>
    <h3>Intermediate Level</h3>
    <h3>Advanced Level</h3>
  <h2>3. Recommended Resources</h2>

In the example above, h1 is the overall topic of the article, h2 represents the three main chapters, and h3 represents the sub-sections within each chapter. This clear hierarchical outline makes it obvious at a glance what the article is about.

Headings with Semantic Tags

In HTML5, semantic tags (<article>, <section>, <nav>, <aside>) and heading tags are often used together. Within each independent block, the heading hierarchy should restart from h1 to h2, rather than continuing the hierarchy from the outer block.

<body>
  <h1>My Blog</h1>

  <article>
    <h2>Title of First Post</h2>
    <p>Article content...</p>
    <section>
      <h3>Subheading within the Article</h3>
      <p>Detailed content...</p>
    </section>
  </article>

  <article>
    <h2>Title of Second Post</h2>
    <p>Article content...</p>
  </article>

  <aside>
    <h2>About the Author</h2>
    <p>Author bio...</p>
  </aside>
</body>

Notice that each <article> and <aside> has its own <h2>. They are independent of each other and don't interfere. This approach conforms to semantic standards and makes the page structure clearer.

Common Heading Mistakes

Beginners often make the following types of mistakes when using heading tags. Check your code against this list:

<!-- Wrong: Using h6 just to make text smaller -->
<h6>Footer copyright info</h6>
<!-- Right: Copyright info uses p tag, font size controlled with CSS -->
<p style="font-size: 12px; color: #999;">&copy; 2024 My Website</p>

<!-- Wrong: Skipping levels -->
<h1>Site Title</h1>
  <h4>Missing h2 and h3</h4>
<!-- Right: Progress in order -->
<h1>Site Title</h1>
  <h2>Primary Section</h2>
    <h3>Subsection</h3>

<!-- Wrong: Multiple h1 tags on one page -->
<h1>Part One</h1>
<h1>Part Two</h1>
<!-- Right: Only one h1, the rest use h2 -->
<h1>Page Title</h1>
<h2>Part One</h2>
<h2>Part Two</h2>

📖 Summary

• <h1> through <h6> — six levels total; h1 is the most important, h6 the least.
• Each page should have only one <h1>; heading levels must not skip.
• The semantic meaning of headings is more important than visual appearance — it affects SEO and accessibility.
• Headings work even better when paired with semantic tags like <article> and <section>.
• Don't use heading tags for font size control — leave styling to CSS.

📝 Exercises

1. Write an article with headings: Use the correct <h1>, <h2>, <h3> hierarchy to write a short article on a topic of your choice (e.g., "My Hobbies"). Use at least the h1, h2, and h3 levels.
2. Find the errors: What's wrong with the following heading hierarchy? Fix it:
   <h1>My Blog</h1>
<h3>Article One</h3>
<h5>Subheading</h5>
<h1>Article Two</h1>
3. Observation exercise: Open a news website and use the browser's Inspect tool (F12) to examine the page's heading hierarchy. See if they follow proper heading conventions.