HTMLmarkup~30 mins

Header, footer, main 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 Layout with Header, Main, and Footer

📖 Scenario: You are creating a simple webpage for a small local bakery. The webpage needs a clear structure with a header at the top, main content in the middle, and a footer at the bottom.

🎯 Goal: Build a basic HTML page using semantic tags: <header>, <main>, and <footer>. This will help organize the page content clearly and accessibly.

📋 What You'll Learn

Use the <header> tag for the top section with the bakery name

Use the <main> tag for the main content describing the bakery

Use the <footer> tag for the bottom section with contact info

Include the lang attribute in the <html> tag set to "en"

Include the <meta charset="UTF-8"> tag in the <head>

Include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag in the <head>

💡 Why This Matters

🌍 Real World

Webpages for businesses often use semantic HTML tags to improve accessibility and SEO. This project shows how to structure a simple page clearly.

💼 Career

Knowing semantic HTML is essential for front-end web developers and helps create websites that work well for all users and devices.

Progress0 / 4 steps

Create the basic HTML structure with <html> and <head>

Create the root <html> element with the attribute lang="en". Inside it, add the <head> element containing a <meta charset="UTF-8"> tag and a <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag.

HTML

Need a hint?

Remember to add lang="en" to the <html> tag and include both <meta> tags inside <head>.

Add a <header> with the bakery name

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

HTML




  
  
  Bakery Website

Need a hint?

Use the <header> tag and place an <h1> inside it with the bakery name.

Add a <main> section with a paragraph describing the bakery

Below the <header>, add a <main> element. Inside <main>, add a <p> tag with the exact text "We bake fresh bread and delicious pastries every day."

HTML




  
  
  Bakery Website


  
    Sweet Treats Bakery

Need a hint?

Use the <main> tag and add a paragraph inside it with the given text.

Add a <footer> with contact information

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

HTML




  
  
  Bakery Website


  
    Sweet Treats Bakery
  
  
    We bake fresh bread and delicious pastries every day.

Need a hint?

Use the <footer> tag and add a paragraph inside it with the contact email.