Semantic vs non-semantic elements in HTML - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a semantic header section.

HTML

<[1]>Welcome to my website</[1]>

Drag options to blanks, or click blank then click option'

Aheader

Bdiv

Cspan

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of a semantic tag.

Using which is inline and non-semantic.

The header tag is a semantic element used to define the header of a page or section.

2fill in blank

medium

Complete the code to create a non-semantic container.

HTML

<[1]>This is a container without semantic meaning.</[1]>

Drag options to blanks, or click blank then click option'

Anav

Barticle

Cdiv

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using semantic tags like

when a generic container is needed.

Using inline tags like for block-level grouping.

The div tag is a non-semantic element used as a generic container.

3fill in blank

hard

Fix the error in the code by replacing the non-semantic tag with a semantic one for navigation.

HTML

<[1]>Home | About | Contact</[1]>

Drag options to blanks, or click blank then click option'

Adiv

Bnav

Csection

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which is non-semantic for navigation.

Using

which is for page footers, not navigation.

The nav tag is semantic and used specifically for navigation links.

4fill in blank

hard

Fill both blanks to create a semantic article with a footer.

HTML

<[1]>
  <h2>My Article</h2>
  <p>This is the content.</p>
  <[2]>Written by me</[2]>
</[1]>

Drag options to blanks, or click blank then click option'

Aarticle

Bdiv

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

for main content.

Using

instead of

for the footer area.

The article tag defines independent content, and footer defines the footer of that content.

5fill in blank

hard

Fill all three blanks to create a semantic page layout with header, main, and footer.

HTML

<[1]>
  <h1>Site Title</h1>
</[1]>
<[2]>
  <p>Welcome to the main content area.</p>
</[2]>
<[3]>
  <p>© 2024 My Website</p>
</[3]>

Drag options to blanks, or click blank then click option'

Aheader

Bmain

Cfooter

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

for all sections instead of semantic tags.

Mixing up the order of semantic tags.

The header contains introductory content, main holds the main page content, and footer contains footer information.

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