ReviseAlgo Logo

HTML Basics

Headings

Master HTML headings (h1 to h6) to build outline hierarchies, improve search indexation (SEO), and structure readable articles.

Last Updated: July 15, 2026 • 8 min read

1. Learning Objectives

In this lesson, you will master page heading hierarchies. By the end of this topic, you will be able to:

  • Identify heading levels from <h1> to <h6> and understand their semantic weight.
  • Structure a document using an outline hierarchy with no skipped levels.
  • Explain how search engines (SEO) and screen readers interpret heading levels.
  • Distinguish between heading levels (semantic weight) and text sizing (CSS styling).

2. Overview

HTML provides six levels of document headings: <h1> represents the most important, top-level heading (the page title), while <h6> represents the least important sub-heading. Headings are semantic indicators, outlining the conceptual hierarchy of the page content rather than simple design font size adjustments.

3. Why This Topic Matters

Structuring headings correctly is a key pillar of accessibility and search indexing:

  • SEO Crawling: Search bots read heading tags to generate the search results description snippet. If headings are missing or out of order, search crawlers fail to parse page topics.
  • Accessibility: Visually impaired users navigate pages by jumping from heading to heading (e.g., using "H" shortcuts). Skipping heading levels (like jumping from `h2` to `h4`) disorients screen readers.

4. Real-World Analogy

Think of headings like the **Table of Contents or Outlines of a Textbook**:

  • Chapter Title (H1): The main title of the chapter. Occurs only once.
  • Section Title (H2): Main sections within the chapter (e.g., "History", "Installation").
  • Sub-sections (H3 & H4): Nested sub-topics (e.g., "Installing on macOS" under "Installation").

5. Core Concepts

Heading Tag Semantic Level Standard Use Case
<h1> Title Level The primary page title. (Maximum of 1 per page).
<h2> Section Level Main article sections or chapter dividers.
<h3> Sub-Section Level Specific details nested within a main section.

6. Syntax & API Reference

All headings require opening and closing tags. Headings block layout flows by default (they are block-level elements):

7. Visual Diagram

The diagram below demonstrates how a browser maps heading tags into a nested outline hierarchy:

8. Live Example — Full Working Code

A sample article showing clean heading hierarchies:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change one of the <h3> elements into an <h2> and observe how the visual size changes.
  2. Identify the layout change if you place an <h1> inside a paragraph tag.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Skipping Heading Levels Using h3 for style spacing directly under h1. <h1>Title</h1><h3>Sub</h3> <h1>Title</h1><h2>Sub</h2>
Multiple H1 Elements Using multiple h1 tags on a single page, diluting SEO weights. <h1>Header</h1><h1>Intro</h1> <h1>Page Title</h1><h2>Intro</h2>

11. Best Practices

  • Keep H1 unique: Declare exactly one <h1> per page representing the page title.
  • Never skip levels: Progress sequentially down (H1 -> H2 -> H3 -> H2). Never jump from H1 directly to H3.
  • Design via CSS, structure via HTML: Choose heading tags based on document structure, not visual sizing. Use CSS classes (e.g. font-size) if you need a lower-level sub-heading to render large.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Heading tags (h1-h6) Supported Supported Supported Supported

13. Interview Questions

Q1: Can you have more than one `<h1>` tag on a single HTML document?

Answer: While HTML5 allows multiple <h1> elements if they are nested inside separate sectioning elements (like <article> or <section>), it is a best practice to have exactly one H1 per document to maintain outline clarity and prevent search engine indexing confusions.

14. Debugging Exercise

Identify the hierarchy bugs in this heading outline:

View Solution

Corrected version:

15. Practice Exercises

Exercise 1: Nested Heading Structure

Draft an outline configuration using H1, H2, and H3 tags to model a book about "Introduction to JavaScript".

16. Scenario-Based Challenge

The Font Size vs Semantic Weight Challenge:

Your designer wants you to make a sub-topic nested deep inside an article render with a huge font size, matching the page header. How do you implement this layout demand without breaking document structure semantics?

17. Quick Quiz

Q1: Which heading tag carries the most semantic weight?

A) <h6>

B) <h1>

C) <title>

Answer: B — The <h1> element is the top-level semantic page title.

18. Summary & Key Takeaways

  • • HTML headings outline page hierarchy from H1 to H6.
  • • Maintain sequential hierarchy flow. Never skip levels.

19. Cheat Sheet

Heading tag Outline Weight
<h1> Primary Title (Max 1)