Headings (h1–h6) in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create the largest heading on the page.

HTML

<[1]>Welcome to my website</[1]>

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

Ah6

Bh3

Ch5

Dh1

Attempts:

3 left

💡 Hint

Common Mistakes

Using a smaller heading tag like h3 or h6 for the main title.

The h1 tag creates the largest heading, usually used for main titles.

2fill in blank

medium

Complete the code to create a subheading smaller than h2 but bigger than h4.

HTML

<[1]>Chapter 1: Introduction</[1]>

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

Ah6

Bh3

Ch5

Dh1

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing h1 or h6 which are too big or too small for this subheading.

The h3 tag is smaller than h2 but larger than h4, perfect for subheadings.

3fill in blank

hard

Fix the error in the heading tag to properly close it.

HTML

<h2>About Us[1]

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

A</h2>

B</h3>

C<h2>

D</h1>

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different heading level in the closing tag.

Forgetting the slash in the closing tag.

The closing tag must match the opening tag. Since the opening is h2, the closing must be .

4fill in blank

hard

Fill both blanks to create a section with a main heading and a smaller subheading.

HTML

<[1]>My Blog</[1]>
<[2]>Latest Posts</[2]>

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

Ah1

Bh2

Ch3

Dh4

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same heading level for both titles.

Using a larger heading for the subheading.

The main heading uses h1 and the subheading uses h3 to show hierarchy.

5fill in blank

hard

Fill all three blanks to create a nested heading structure with decreasing sizes.

HTML

<[1]>Site Title</[1]>
<section>
  <[2]>Section Title</[2]>
  <article>
    <[3]>Article Title</[3]>
  </article>
</section>

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

Ah1

Bh2

Ch3

Dh4

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same heading level for all titles.

Using a larger heading for nested content.

The largest heading is h1 for the site title, then h2 for the section, and h3 for the article, showing clear hierarchy.

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