0
0
HTMLmarkup~30 mins

Semantic vs non-semantic elements in HTML - Hands-On Comparison

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Semantic vs Non-Semantic Elements in HTML
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to be clear and easy to understand for both visitors and search engines.
🎯 Goal: Build a basic HTML page using semantic elements to structure the content properly instead of non-semantic elements.
📋 What You'll Learn
Use semantic HTML5 elements like <header>, <nav>, <main>, <section>, and <footer>.
Avoid using non-semantic elements like <div> and <span> for main page structure.
Include a navigation menu inside the <nav> element.
Add a main content area with at least two sections describing bakery products and contact info.
Add a footer with copyright information.
💡 Why This Matters
🌍 Real World
Semantic HTML is used in all professional websites to improve accessibility, SEO, and maintainability.
💼 Career
Web developers must know semantic elements to build websites that work well for all users and devices.
Progress0 / 4 steps
1
Create the basic HTML skeleton
Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, and a <title> of "Bakery Home". Then open the <body> tag.
HTML
Need a hint?

Start with the standard HTML5 document structure including language and meta tags.

2
Add semantic page structure elements
Inside the <body>, add a <header> element, a <nav> element, a <main> element, and a <footer> element in that order.
HTML
Need a hint?

Use semantic tags to define the main parts of the page.

3
Add navigation links and main content sections
Inside the <nav>, add an unordered list with three links: Home, Products, and Contact. Inside the <main>, add two <section> elements. The first section should have a heading <h2>Our Products</h2> and a paragraph describing bakery items. The second section should have a heading <h2>Contact Us</h2> and a paragraph with contact details.
HTML
Need a hint?

Use lists for navigation and sections with headings and paragraphs for main content.

4
Add footer content and close HTML tags
Inside the <footer>, add a paragraph with the text "© 2024 Bakery Inc.". Then close the <body> and <html> tags.
HTML
Need a hint?

Finish the page by adding footer text and closing all open tags.