Header tag hierarchy (H1, H2, H3) in SEO Fundamentals - Step-by-Step Execution

Concept Flow - Header tag hierarchy (H1, H2, H3)

Start: Page Content

↓

Add H1: Main Title

↓

Add H2: Section Title

↓

Add H3: Subsection Title

↓

Repeat H2 or H3 as needed

↓

End: Complete Header Structure

The flow shows how header tags are added in order: main title (H1), then sections (H2), then subsections (H3), maintaining a clear hierarchy.

Execution Sample

SEO Fundamentals

<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h2>Section 2</h2>

This code creates a page with a main title, two sections, and a subsection under the first section.

Analysis Table

Step	Tag Added	Hierarchy Level	Parent Header	Effect on Structure
1	<h1>Main Title</h1>	1	None	Defines main page title
2	<h2>Section 1</h2>	2	H1 Main Title	Starts first section under main title
3	<h3>Subsection 1.1</h3>	3	H2 Section 1	Adds subsection under Section 1
4	<h2>Section 2</h2>	2	H1 Main Title	Starts second section under main title

💡 All headers added following hierarchy: H1 > H2 > H3; no lower-level header added before higher-level parent.

State Tracker

Header Level	After Step 1	After Step 2	After Step 3	After Step 4
H1	Main Title	Main Title	Main Title	Main Title
H2	None	Section 1	Section 1	Section 2
H3	None	None	Subsection 1.1	Subsection 1.1

Key Insights - 2 Insights

Why can't we add an <h3> before an <h2>?

Because <h3> is a lower-level header and should be nested under an <h2>. The execution_table shows <h3> added only after <h2> exists (Step 3).

Can there be multiple <h1> tags on one page?

Typically, only one <h1> is used as the main title. The execution_table shows a single <h1> at Step 1, setting the top hierarchy.

Visual Quiz - 3 Questions

Look at the execution_table at Step 3. What is the parent header of <h3>Subsection 1.1</h3>?

A H3 Subsection 1.1

B H1 Main Title

C H2 Section 1

D None

💡 Hint

Check the 'Parent Header' column at Step 3 in the execution_table.

At which step is the second <h2> tag added?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the 'Tag Added' column in the execution_table for

tags.

If we add another <h3> after Step 4, under which header should it be nested?

A Under H2 Section 2

B Under H1 Main Title

C Under H3 Subsection 1.1

D No nesting needed

💡 Hint

Refer to the hierarchy levels and parent headers in the variable_tracker and execution_table.

Concept Snapshot

Header tags create page structure:
- <h1>: Main title (only one per page)
- <h2>: Sections under <h1>
- <h3>: Subsections under <h2>
Maintain order: H1 > H2 > H3
Proper hierarchy helps SEO and readability.

Full Transcript

This visual execution shows how header tags build a page's structure. We start with an <h1> as the main title, then add <h2> tags for sections, and <h3> tags for subsections. Each header nests under the higher-level header before it. The execution table tracks each step, showing the tag added, its hierarchy level, and parent header. The variable tracker shows how headers exist after each step. Key moments clarify why lower-level headers can't appear before their parents and why only one <h1> is typical. The quiz tests understanding of header relationships and order. This hierarchy improves page clarity and SEO.

Practice

1. Which header tag should be used for the main title of a webpage?

easy

A. H1

B. H2

C. H3

D. H4

Solution

1. Step 1: Understand header tag purpose

   The H1 tag is designed for the main title or most important heading on a webpage.

2. Step 2: Identify correct tag for main title

   Since the main title is the highest level heading, H1 is the correct choice.

3. Final Answer:

   <H1> -> Option A

4. Quick Check:

   Main title = <H1> [OK]

Hint: Main title always uses H1 tag [OK]

Common Mistakes:

• Using H2 or H3 for main title
• Using multiple H1 tags for different sections
• Confusing header levels

2. Which of the following is the correct syntax for a second-level header in HTML?

easy

A. <h2>Section Title</h2>

B. <header2>Section Title</header2>

C. <h3>Section Title</h3>

D. <h1>Section Title</h1>

Solution

1. Step 1: Recall HTML header tag syntax

   HTML header tags use the format <hN> where N is the level number.

2. Step 2: Identify second-level header tag

   The second-level header is represented by <h2> and must be closed with </h2>.

3. Final Answer:

   <h2>Section Title</h2> -> Option A

4. Quick Check:

   Second-level header = <h2> [OK]

Hint: Use <h2> for second-level headers [OK]

Common Mistakes:

• Using incorrect tag names like <header2>
• Mixing header levels in syntax
• Forgetting closing tags

3. Consider this HTML snippet:

<h1>Welcome</h1>
<h3>Introduction</h3>
<h2>About Us</h2>

What is wrong with the header hierarchy?

medium

A. There should be no H2 tag after H3

B. The H1 tag should be replaced with H2

C. The tags are correctly ordered

D. The H3 tag should not come before H2

Solution

1. Step 1: Review header tag order importance

   Header tags should follow a logical order: H1, then H2, then H3, etc., to show content structure.

2. Step 2: Analyze given snippet order

   The snippet uses H1, then H3, then H2. The H3 appears before H2, which breaks the hierarchy.

3. Final Answer:

   The <H3> tag should not come before <H2> -> Option D

4. Quick Check:

   Header order must be H1 > H2 > H3 [OK]

Hint: Headers must follow H1, then H2, then H3 order [OK]

Common Mistakes:

• Ignoring header order importance
• Thinking any order is fine
• Replacing H1 with lower headers incorrectly

4. You see this HTML structure:

<h1>Title</h1>
<h2>Section 1</h2>
<h4>Subsection</h4>

What is the problem and how to fix it?

medium

A. Replace H1 with H3

B. Change H2 to H4 to match subsection

C. Use H3 instead of H4 for the subsection

D. No problem, this is correct

Solution

1. Step 1: Check header levels for hierarchy

   Headers should increase by one level at a time to keep structure clear.

2. Step 2: Identify skipped header level

   The snippet jumps from H2 to H4, skipping H3, which breaks hierarchy.

3. Step 3: Fix the skipped level

   Change the H4 tag to H3 to maintain proper order.

4. Final Answer:

   Use <H3> instead of <H4> for the subsection -> Option C

5. Quick Check:

   Headers must not skip levels [OK]

Hint: Never skip header levels; use next immediate level [OK]

Common Mistakes:

• Skipping header levels
• Changing higher-level headers incorrectly
• Ignoring hierarchy rules

5. You are designing a webpage with a main title, two sections, and each section has two subsections. Which header tag hierarchy is best to organize this content?

hard

A. H2 for main title, H3 for sections, H4 for subsections

B. H1 for main title, H2 for sections, H3 for subsections

C. H3 for main title, H2 for sections, H1 for subsections

D. H1 for main title, H3 for sections, H2 for subsections

Solution

1. Step 1: Understand header tag levels and their meaning

   H1 is the highest level for main titles, H2 for main sections, and H3 for subsections under those sections.

2. Step 2: Match header tags to content structure

   Using H1 for the main title, H2 for each section, and H3 for subsections keeps a clear, logical hierarchy.

3. Final Answer:

   H1 for main title, H2 for sections, H3 for subsections -> Option B

4. Quick Check:

   Hierarchy: H1 > H2 > H3 [OK]

Hint: Use H1, then H2, then H3 for main, section, subsection [OK]

Common Mistakes:

• Mixing header levels incorrectly
• Using lower headers for main titles
• Skipping header levels in structure