Bird
Raised Fist0
SEO Fundamentalsknowledge~30 mins

Header tag hierarchy (H1, H2, H3) in SEO Fundamentals - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepVisualPracticeChallengeProjectRecallTime

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Header Tag Hierarchy (H1, H2, H3)
📖 Scenario: You are creating a simple webpage for a local bakery. The page needs a clear structure using header tags to help visitors and search engines understand the content sections.
🎯 Goal: Build a webpage with a proper header tag hierarchy using <h1>, <h2>, and <h3> tags to organize the page content clearly.
📋 What You'll Learn
Use exactly one <h1> tag for the main page title.
Use <h2> tags for main sections under the title.
Use <h3> tags for subsections under each <h2>.
Maintain correct nesting order: <h1> > <h2> > <h3>.
Use semantic HTML5 structure with <main> and <section> elements.
💡 Why This Matters
🌍 Real World
Webpages need clear header structures so visitors and search engines can easily understand the content layout and importance.
💼 Career
Web developers and content creators use header tag hierarchy to improve website accessibility, SEO ranking, and user experience.
Progress0 / 4 steps
1
Create the HTML skeleton with main title
Create a basic HTML5 structure with <html>, <head>, and <body> tags. Inside the <body>, add a <main> element. Inside <main>, add an <h1> tag with the text "Sweet Treats Bakery".
SEO Fundamentals
Hint

Remember to include the <h1> tag inside the <main> element with the exact text.

2
Add main sections with H2 tags
Inside the existing <main> element, add two <section> elements. In the first section, add an <h2> tag with the text "Our Menu". In the second section, add an <h2> tag with the text "About Us".
SEO Fundamentals
Hint

Make sure each <h2> is inside its own <section> element.

3
Add subsections with H3 tags under 'Our Menu'
Inside the first <section> with the <h2> "Our Menu", add two <h3> tags. The first <h3> should have the text "Cakes" and the second <h3> should have the text "Pastries".
SEO Fundamentals
Hint

Place the <h3> tags inside the first <section> after the <h2> tag.

4
Add a subsection with H3 tag under 'About Us'
Inside the second <section> with the <h2> "About Us", add one <h3> tag with the text "Our Story".
SEO Fundamentals
Hint

Place the <h3> tag inside the second <section> after the <h2> tag.

Practice

(1/5)
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