Headings (h1–h6) in HTML - Mini Project: Build & Apply

Creating a Webpage with Headings (h1-h6)

📖 Scenario: You are building a simple webpage for a small community event. The page needs clear headings to organize the content so visitors can easily find information.

🎯 Goal: Create a webpage using all six heading levels from <h1> to <h6> to show the event's title and different sections.

📋 What You'll Learn

Use all heading tags from <h1> to <h6> exactly once.

Each heading must have the exact text specified in the instructions.

Use semantic HTML5 structure with <main> as the container for headings.

Include the lang attribute in the <html> tag and proper <meta charset="UTF-8"> in the <head>.

Make sure the page is accessible with clear heading hierarchy.

💡 Why This Matters

🌍 Real World

Webpages often use headings to organize content so visitors can scan and understand the page quickly.

💼 Career

Knowing how to structure headings and use semantic HTML is essential for building accessible and well-organized websites.

1

Create the basic HTML structure with lang and meta charset

Write the starting HTML code with <!DOCTYPE html>, <html lang="en">, <head> containing <meta charset="UTF-8">, and an empty <body>.

HTML

Hint

Start with the basic HTML5 page structure. Include lang="en" in the <html> tag and <meta charset="UTF-8"> inside <head>.

2

Add a <main> container inside <body>

Inside the <body> tag, add a <main> element to hold the page content.

HTML

    
    Community Event


    

Hint

The <main> tag is used to wrap the main content of the page. Add it inside the <body> tag.

3

Add all six headings inside <main> with exact text

Inside the <main> element, add these headings exactly:
<h1>Community Event 2024</h1>
<h2>Schedule</h2>
<h3>Workshops</h3>
<h4>Speakers</h4>
<h5>Sponsors</h5>
<h6>Contact Information</h6>

HTML

    
    Community Event


    
        
    

Hint

Use each heading tag from <h1> to <h6> with the exact text given. This creates a clear content hierarchy.

4

Add an accessible aria-label to the <main> element

Add an aria-label="Main content of Community Event page" attribute to the <main> tag to improve accessibility.

HTML

    
    Community Event


    
    
        Community Event 2024
        Schedule
        Workshops
        Speakers
        Sponsors
        Contact Information
    

Hint

Adding an aria-label helps screen readers describe the main section clearly. Add it inside the opening <main> tag.

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