Header tag hierarchy (H1, H2, H3) in SEO Fundamentals - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of header tags

What is the main reason for using header tags like <h1>, <h2>, and <h3> in a webpage?

A To create clickable buttons for navigation

B To add decorative fonts and colors to the text

C To embed images and videos within the text

D To organize content into sections and improve accessibility and SEO

💡 Hint

Think about how screen readers and search engines use page structure.

Header tags define the structure of content, helping both users and search engines understand the hierarchy and importance of information on a page.

📋 Factual

intermediate

Correct header tag usage

Which of the following is the correct order of header tags to maintain proper hierarchy?

A &lt;h1&gt; &lt;h3&gt; &lt;h2&gt;

B &lt;h2&gt; &lt;h1&gt; &lt;h3&gt;

C &lt;h1&gt; &lt;h2&gt; &lt;h3&gt;

D &lt;h3&gt; &lt;h2&gt; &lt;h1&gt;

💡 Hint

Headers should go from the most important to less important.

The correct hierarchy starts with <h1> as the main title, followed by <h2> for subsections, then <h3> for smaller sections.

🔍 Analysis

advanced

Impact of multiple H1 tags on SEO

What is the likely effect on SEO if a webpage contains multiple <h1> tags instead of just one?

A It improves SEO by highlighting many important topics

B It can confuse search engines and reduce SEO effectiveness

C It has no effect on SEO at all

D It causes the page to load slower

💡 Hint

Consider how search engines interpret the main topic of a page.

Using multiple <h1> tags can confuse search engines about the main topic, potentially harming SEO rankings.

❓ Comparison

advanced

Difference between H2 and H3 tags

How does an <h3> tag differ from an <h2> tag in webpage structure?

A &lt;h3&gt; represents a subsection under an &lt;h2&gt; section

B &lt;h3&gt; is used for main titles, &lt;h2&gt; for subtitles

C &lt;h3&gt; and &lt;h2&gt; have the same importance

D &lt;h3&gt; is used only for footer content

💡 Hint

Think about the levels of headings and their nesting.

<h3> tags are used for subsections within an <h2> section, showing a deeper level of detail.

❓ Reasoning

expert

Choosing header tags for accessibility

Why is it important to maintain a logical header tag hierarchy (like <h1> followed by <h2>, then <h3>) for users relying on screen readers?

A Because screen readers use header order to navigate and understand page structure

B Because screen readers ignore header tags and only read paragraphs

C Because header tags change the font size for screen readers

D Because screen readers require all headers to be &lt;h1&gt; for clarity

💡 Hint

Consider how screen readers help users jump between sections.

Screen readers rely on the logical order of header tags to help users navigate content efficiently and understand the page layout.

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