Headings (h1–h6) in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Visual difference between heading levels

Look at the following HTML snippet. Which heading will appear largest on the page?

HTML

<h1>Heading One</h1>
<h3>Heading Three</h3>
<h6>Heading Six</h6>

A The <h6> heading

B The <h1> heading

C The <h3> heading

D All headings appear the same size

💡 Hint

Remember, heading tags from h1 to h6 decrease in size.

The <h1> tag is the largest heading by default, followed by <h2>, <h3>, down to <h6> which is the smallest.

🧠 Conceptual

intermediate

Proper use of heading levels for accessibility

Why is it important to use heading tags (<h1> to <h6>) in order without skipping levels?

A Because skipping levels changes the font color automatically

B Because browsers will not display headings if levels are skipped

C Because screen readers rely on heading order to navigate content

D Because headings must always be used in pairs

💡 Hint

Think about how people who use assistive technology read web pages.

Screen readers use heading levels to create a content outline, so skipping levels can confuse users who rely on them.

📝 Syntax

advanced

Identify the invalid heading tag

Which of these heading tags is NOT valid HTML5?

A <h0>Title</h0>

B <h1>Title</h1>

C <h4>Title</h4>

D <h6>Title</h6>

💡 Hint

Valid heading tags are numbered from 1 to 6.

HTML5 defines heading tags only from <h1> to <h6>. <h0> is not a valid tag.

❓ selector

advanced

CSS selector for all heading tags

Which CSS selector will select all heading tags from <h1> to <h6>?

A h*

B heading

C h1-h6

D h1, h2, h3, h4, h5, h6

💡 Hint

Think about how to list multiple selectors separated by commas.

To select multiple elements, list them separated by commas. There is no wildcard selector like h* for tags.

❓ accessibility

expert

Screen reader behavior with multiple <h1> tags

What happens when a webpage uses multiple <h1> tags for different sections?

A Screen readers treat each &lt;h1&gt; as a new main section, improving navigation

B Screen readers treat all &lt;h1&gt; tags as one heading

C Screen readers crash or stop reading the page

D Screen readers ignore all but the first &lt;h1&gt; tag

💡 Hint

Modern HTML5 allows multiple <h1> tags if used correctly.

Using multiple <h1> tags inside different sections or articles is valid and helps screen readers navigate distinct main sections.

Practice

1. Which HTML tag represents the largest heading on a webpage?

easy

A. <h5>

B. <h1>

C. <h3>

D. <h6>

Solution

1. Step 1: Understand heading sizes

   HTML headings range from <h1> (largest) to <h6> (smallest).

2. Step 2: Identify the largest heading tag

   The <h1> tag is the biggest and most important heading on a page.

3. Final Answer:

   <h1> -> Option B

4. Quick Check:

   Largest heading = <h1> [OK]

Hint: Remember: h1 is biggest, h6 is smallest [OK]

Common Mistakes:

• Confusing h3 or h5 as largest heading
• Thinking h6 is the biggest heading
• Mixing heading tags with paragraph tags

2. Which of the following is the correct syntax for a level 3 heading in HTML?

easy

A. <h2>Heading Text</h2>

B. <h33>Heading Text</h33>

C. <heading3>Heading Text</heading3>

D. <h3>Heading Text</h3>

Solution

1. Step 1: Recall heading tag syntax

   HTML heading tags use the format <hN>...</hN> where N is a number 1 to 6.

2. Step 2: Identify correct level 3 heading

   The correct tag for level 3 heading is <h3> with matching closing tag </h3>.

3. Final Answer:

   <h3>Heading Text</h3> -> Option D

4. Quick Check:

   Correct syntax for h3 = <h3>...</h3> [OK]

Hint: Use h1 to h6 tags with matching closing tags [OK]

Common Mistakes:

• Using invalid tags like <heading3>
• Mismatched opening and closing tags
• Using numbers incorrectly like <h33>

3. What will be the visual result of this HTML code?

<h1>Title</h1>
<h4>Subtitle</h4>
<h2>Section</h2>

medium

A. All headings appear the same size

B. Title is smallest, Subtitle is largest, Section is medium

C. Title is largest, Section is medium, Subtitle is smallest

D. Subtitle is largest, Title is medium, Section is smallest

Solution

1. Step 1: Understand heading size order

   Heading sizes go from <h1> largest to <h6> smallest.

2. Step 2: Compare given headings

   <h1> Title is largest, <h2> Section is medium, <h4> Subtitle is smaller than h2.

3. Final Answer:

   Title is largest, Section is medium, Subtitle is smallest -> Option C

4. Quick Check:

   h1 > h2 > h4 sizes [OK]

Hint: Lower number means bigger heading size [OK]

Common Mistakes:

• Assuming h4 is bigger than h2
• Thinking all headings have same size
• Mixing order of heading sizes

4. Identify the error in this HTML snippet:

<h2>Welcome<h2>

medium

A. Missing closing tag should be </h2>

B. Tag <h2> is not valid in HTML

C. Heading tags cannot contain text

D. Opening tag should be <h3> instead

Solution

1. Step 1: Check tag correctness

   The opening tag is <h2>, but the closing tag is incorrectly written as <h2> instead of </h2>.

2. Step 2: Identify proper closing tag

   HTML requires closing tags to have a slash, so it should be </h2> to close the heading properly.

3. Final Answer:

   Missing closing tag should be </h2> -> Option A

4. Quick Check:

   Closing tags need slash / [OK]

Hint: Closing tags must have a slash before tag name [OK]

Common Mistakes:

• Forgetting the slash in closing tags
• Thinking heading tags can't have text
• Confusing tag names like h2 and h3

5. You want to create a page with a main title, two sections each with subtitles, and sub-subtitles under each subtitle. Which heading order is best practice for accessibility and SEO?

hard

A. <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4>

B. <h3>Main Title</h3>, <h1>Section</h1>, <h2>Subtitle</h2>, <h4>Sub-subtitle</h4>

C. <h4>Main Title</h4>, <h3>Section</h3>, <h2>Subtitle</h2>, <h1>Sub-subtitle</h1>

D. <h2>Main Title</h2>, <h3>Section</h3>, <h4>Subtitle</h4>, <h5>Sub-subtitle</h5>

Solution

1. Step 1: Understand heading hierarchy

   Headings should start with <h1> for main title, then <h2> for sections, <h3> for subtitles, and <h4> for sub-subtitles.

2. Step 2: Check options for correct order

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> follows the correct descending order from h1 to h4, which helps screen readers and SEO understand content structure.

3. Final Answer:

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> -> Option A

4. Quick Check:

   Proper heading order = h1, h2, h3, h4 [OK]

Hint: Use headings in descending order from h1 to h6 [OK]

Common Mistakes:

• Starting main title with h3 or lower
• Skipping heading levels randomly
• Using bigger numbers for main titles