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

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.

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

  
  
  Bakery Home

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

  
  
  Bakery Home


  

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

  
  
  Bakery Home


  
  
    
  
  
    
  
  

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

  
  
  Bakery Home


  
  
    
      Home
      Products
      Contact
    
  
  
    
      Our Products
      We offer fresh bread, cakes, and pastries made daily.
    
    
      Contact Us
      Call us at 123-456-7890 or visit us at 123 Bakery Lane.
    
  
  
    
  

Hint

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

Practice

1. Which of the following is a semantic HTML element?

easy

A. <article>

B. <div>

C. <span>

D. <b>

Solution

1. Step 1: Understand semantic elements

   Semantic elements clearly describe their meaning, like <article> which represents an independent piece of content.

2. Step 2: Identify non-semantic elements

   <div> and <span> are generic containers without meaning. <b> is a presentational element without semantic meaning.

3. Final Answer:

   <article> -> Option A

4. Quick Check:

   Semantic element = <article> [OK]

Hint: Semantic tags describe content meaning, non-semantic don't [OK]

Common Mistakes:

• Confusing <div> as semantic
• Thinking <span> is semantic
• Thinking <b> is semantic

2. Which of these is the correct syntax for a semantic header element in HTML5?

easy

A. <heading>Welcome</heading>

B. <head>Welcome</head>

C. <header>Welcome</header>

D. <head><title>Welcome</title></head>

Solution

1. Step 1: Recognize semantic header tag

   <header> is the semantic tag for page or section headers.

2. Step 2: Differentiate from <head>

   <head> contains metadata, not visible content. <heading> is not a valid HTML tag.

3. Final Answer:

   <header>Welcome</header> -> Option C

4. Quick Check:

   Semantic header = <header> [OK]

Hint: Use <header> for visible headers, not <head> [OK]

Common Mistakes:

• Using <head> for visible content
• Writing invalid <heading> tag
• Confusing metadata with page content

3. What will the browser display when rendering this HTML snippet?

<div><h1>Title</h1><p>Paragraph</p></div>

Choose the best description.

medium

A. Only the paragraph 'Paragraph' is shown

B. A heading 'Title' and a paragraph 'Paragraph' inside a generic container

C. An error because <div> cannot contain <h1>

D. The heading 'Title' is bold but paragraph is hidden

Solution

1. Step 1: Understand <div> usage

   <div> is a non-semantic container that can hold any flow content including headings and paragraphs.

2. Step 2: Check rendering of heading and paragraph

   The <h1> will display as a large bold heading, and <p> as a paragraph below it, both visible inside the container.

3. Final Answer:

   A heading 'Title' and a paragraph 'Paragraph' inside a generic container -> Option B

4. Quick Check:

   Non-semantic container shows all content [OK]

Hint: Div can hold headings and paragraphs without errors [OK]

Common Mistakes:

• Thinking div restricts content types
• Assuming heading is hidden
• Believing invalid nesting error occurs

4. Identify the error in this HTML code:

<section><div>Content</section></div>

medium

A. The tags are correctly nested with no errors

B. The <section> tag cannot contain a <div>

C. The <section> tag is missing a closing tag

D. The <div> tag is not closed before </section>

Solution

1. Step 1: Check tag nesting order

   The <div> opens inside <section> but closes after </section>, breaking proper nesting.

2. Step 2: Understand correct nesting rules

   Tags must close in reverse order of opening. Here, <div> should close before </section>.

3. Final Answer:

   The <div> tag is not closed before </section> -> Option D

4. Quick Check:

   Proper nesting = close inner tags first [OK]

Hint: Close inner tags before outer tags to avoid nesting errors [OK]

Common Mistakes:

• Ignoring tag closing order
• Thinking div can't be inside section
• Missing closing tags

5. You want to improve accessibility and SEO by replacing non-semantic tags with semantic ones. Which change is best for this code?

<div><div>Main content</div><div>Footer info</div></div>

hard

A. Replace outer <div> with <main> and inner footer <div> with <footer>

B. Replace all <div> with <section>

C. Replace outer <div> with <article> and inner footer <div> with <aside>

D. Keep all <div> tags because semantic tags are optional

Solution

1. Step 1: Identify semantic tags for main content and footer

   <main> is the semantic tag for main page content, and <footer> is for footer information.

2. Step 2: Replace non-semantic <div> with semantic tags

   Changing the outer <div> to <main> and the footer <div> to <footer> improves meaning and accessibility.

3. Final Answer:

   Replace outer <div> with <main> and inner footer <div> with <footer> -> Option A

4. Quick Check:

   Use <main> and <footer> for better semantics [OK]

Hint: Use <main> for main content, <footer> for footer info [OK]

Common Mistakes:

• Using <article> instead of <main> for main content
• Replacing all divs with <section> unnecessarily
• Ignoring semantic improvements