0
0
HTMLmarkup~30 mins

Clean HTML structure - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Clean HTML structure
📖 Scenario: You are creating a simple webpage for a local bakery. The page will have a header, a navigation menu, a main content area with a welcome message, and a footer with contact info.
🎯 Goal: Build a clean, semantic HTML5 page structure using appropriate tags: <header>, <nav>, <main>, and <footer>. The page should be easy to read and accessible.
📋 What You'll Learn
Use semantic HTML5 tags for page sections
Include a header with the bakery name inside an <h1> tag
Add a navigation menu with three links inside a <nav> element
Create a main section with a welcome paragraph inside a <main> tag
Add a footer with contact information inside a <footer> tag
💡 Why This Matters
🌍 Real World
Building clean and semantic HTML pages is essential for creating websites that are accessible, easy to maintain, and work well on all devices.
💼 Career
Web developers and designers must know how to structure HTML properly to ensure good user experience and accessibility compliance.
Progress0 / 4 steps
1
Create the basic HTML skeleton
Write the basic HTML5 document structure with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <title> Bakery Homepage </title>, and an empty <body>.
HTML
Need a hint?

Start with the standard HTML5 document structure. Include lang="en" in the <html> tag for accessibility.

2
Add the header with bakery name
Inside the <body>, add a <header> element containing an <h1> with the text Sweet Treats Bakery.
HTML
Need a hint?

Use the <header> tag to group the page title inside an <h1>.

3
Add navigation menu with links
Below the header, add a <nav> element containing an unordered list <ul> with three list items <li>. Each list item should have a link <a> with href attributes: #home, #menu, and #contact. The link texts are Home, Menu, and Contact respectively.
HTML
Need a hint?

Use <nav> for navigation and an unordered list <ul> for the links.

4
Add main content and footer
Below the navigation, add a <main> element with a paragraph <p> that says Welcome to Sweet Treats Bakery, your home for delicious pastries!. Then add a <footer> with a paragraph containing the text Contact us at info@sweettreats.com.
HTML
Need a hint?

Use <main> for the main content and <footer> for the contact info.