HTMLmarkup~15 mins

Block-level elements in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Building a Simple Webpage with Block-level Elements

📖 Scenario: You are creating a simple webpage for a local bakery. The page will have a header, a main section with a welcome message, and a footer with contact information. You will use block-level elements to structure the page.

🎯 Goal: Build a basic HTML page using block-level elements: , , and . Each section will contain text content relevant to the bakery.

📋 What You'll Learn

Use semantic block-level elements:

, and

Include a heading inside the header.

Add a paragraph inside the main section.

Place contact information inside the footer.

Ensure the HTML structure is valid and well-formed.

💡 Why This Matters

🌍 Real World

Block-level elements help organize webpage content clearly and semantically, making it easier for browsers and assistive technologies to understand the page structure.

💼 Career

Knowing how to use semantic block-level elements is essential for web developers to build accessible and maintainable websites.

Progress0 / 4 steps

Create the HTML skeleton with <html> and <body>

Write the basic HTML structure starting with <!DOCTYPE html>, then add the <html lang="en"> tag, and inside it add the <body> tag.

HTML

Need a hint?

Start with the document type declaration and add the root html element with language attribute, then add the body element inside html.

Add a <header> with a heading inside <body>

Inside the <body> tag, add a <header> element. Inside the header, add an <h1> heading with the text "Welcome to Sweet Treats Bakery".

HTML

Need a hint?

Use the

tag to group the heading, and place an

inside it with the exact text.

Add a <main> section with a welcome paragraph

Below the <header>, add a <main> element. Inside

, add a <p> paragraph with the text "We bake fresh bread and delicious pastries every day."

HTML





  Welcome to Sweet Treats Bakery

Need a hint?

Use the

tag for the main content and add a paragraph inside it with the exact text.

Add a <footer> with contact information

Below the <main> section, add a <footer> element. Inside the footer, add a <p> paragraph with the text "Contact us at contact@sweettreats.com".

HTML





  Welcome to Sweet Treats Bakery


  We bake fresh bread and delicious pastries every day.

Need a hint?

Use the