HTMLmarkup~20 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

Add a <main> container inside <body>

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

HTML




    
    Community Event

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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