Header tag hierarchy (H1, H2, H3) in SEO Fundamentals - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the main title of a webpage using the correct header tag.

SEO Fundamentals

<[1]>Welcome to My Website</[1]>

Drag options to blanks, or click blank then click option'

Ah3

Bh2

Ch1

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

for the main title instead of

.

Using paragraph

tags for headings.

The main title of a webpage should use the h1 tag to indicate the highest level heading.

2fill in blank

medium

Complete the code to add a subheading under the main title using the correct header tag.

SEO Fundamentals

<h1>Main Title</h1>
<[1]>Subheading Section</[1]>

Drag options to blanks, or click blank then click option'

Ah2

Bdiv

Ch3

Dh1

Attempts:

3 left

💡 Hint

Common Mistakes

Using

again for subheadings.

Using non-heading tags like

for subheadings.

Subheadings under the main title should use the h2 tag to show the next level in the hierarchy.

3fill in blank

hard

Fix the error in the header tag hierarchy by choosing the correct tag for a subsection under an <h2> heading.

SEO Fundamentals

<h1>Main Title</h1>
<h2>Section Title</h2>
<[1]>Subsection Title</[1]>

Drag options to blanks, or click blank then click option'

Ah1

Bspan

Ch2

Dh3

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

again for subsections.

Using inline tags like instead of header tags.

Subsections under an h2 heading should use h3 to maintain proper hierarchy.

4fill in blank

hard

Fill both blanks to create a correct header hierarchy with a main title and a subsection.

SEO Fundamentals

<[1]>Website Title</[1]>
<[2]>Details Section</[2]>

Drag options to blanks, or click blank then click option'

Ah1

Bh2

Ch3

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same header level for both titles.

Using non-heading tags like

for headings.

The main title uses h1 and the subsection uses h3 to show a nested structure under an implied

.

5fill in blank

hard

Fill all three blanks to create a proper header hierarchy with a main title, a section, and a subsection.

SEO Fundamentals

<[1]>Home Page</[1]>
<[2]>About Us</[2]>
<[3]>Our Team</[3]>

Drag options to blanks, or click blank then click option'

Ah1

Bh2

Ch3

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Skipping header levels or repeating the same header tag.

Using non-heading tags like

for headings.

The main title uses h1, the section uses h2, and the subsection uses h3 to maintain a clear and accessible header structure.

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