Common HTML mistakes - Mini Project: Build & Apply

Fixing Common HTML Mistakes

📖 Scenario: You are creating a simple webpage for a local bakery. The page should have a header, a navigation menu, a main section with a welcome message, and a footer with contact info.However, the initial HTML has some common mistakes that can cause problems in browsers or for people using assistive technology.

🎯 Goal: Fix the common HTML mistakes in the bakery webpage so it uses correct tags, proper nesting, and semantic structure. The page should be accessible and display correctly in browsers.

📋 What You'll Learn

Use semantic HTML5 elements like

,

,

, and

Include with and sections

Add tags for charset and viewport inside

Use proper nesting of tags (no overlapping or missing closing tags)

Add accessible attributes like

with aria-label

Use or for emphasis instead of deprecated tags

Ensure the page title is inside