Why semantic HTML matters - Test Your Understanding

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'

Adiv

Bheader

Cspan

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of a semantic tag.

Using which is inline and not for sections.

The header tag is used to define the header of a page or section, making the structure clear to browsers and assistive technologies.

2fill in blank

medium

Complete the code to mark up the main content area semantically.

HTML

<[1]>This is the main content of the page.</[1]>

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

Aaside

Bfooter

Cmain

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which is for page footers.

Using

which is for side content.

The main tag defines the main content of the document, which is unique and central to the page.

3fill in blank

hard

Fix the error in the code by choosing the correct semantic tag for a navigation menu.

HTML

<[1]>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</[1]>

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

Anav

Bmenu

Csection

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which is non-semantic.

Using

which is more general.

The nav tag is the correct semantic element to wrap navigation links, helping screen readers and search engines understand the page structure.

4fill in blank

hard

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

HTML

<[1]>
  <h2>My Article</h2>
  <p>This is an article about semantic HTML.</p>
  <[2]>
    <p>Written by Jane Doe</p>
  </[2]>
</[1]>

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

Aarticle

Bheader

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

for independent content.

Using

instead of

for the bottom info.

The article tag wraps the content that forms an independent piece of content, and the footer tag inside it contains information about the article like the author.

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 homepage.</p>
</[2]>
<[3]>
  <p>Contact info here.</p>
</[3]>

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

Aheader

Bmain

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of semantic tags.

Mixing up footer and header tags.

The header tag is for the top section, main for the main content, and footer for the bottom section of the page. This structure helps browsers and assistive tools understand the page layout.