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.