Navigation structure basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a navigation bar using the correct HTML element.

HTML

<[1]>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</[1]>

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

Anav

Bsection

Cdiv

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

for navigation links.

Not using a semantic element for navigation.

The <nav> element is used to define a block of navigation links. It helps browsers and assistive technologies understand the page structure.

2fill in blank

medium

Complete the code to add a navigation list inside the nav element.

HTML

<nav>
  <ul>[1]</ul>
</nav>

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

A<p>Home</p><p>About</p><p>Contact</p>

B<li>Home</li><li>About</li><li>Contact</li>

C<div>Home</div><div>About</div><div>Contact</div>

D<a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a>

Attempts:

3 left

💡 Hint

Common Mistakes

Placing tags directly inside

without
• .

Using

or

tags instead of list items.

Navigation links are often grouped inside an unordered list <ul> with each link inside a list item <li>. This helps screen readers and organizes the links clearly.

3fill in blank

hard

Fix the error in the navigation code by completing the blank with the correct attribute for links.

HTML

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

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

Ahref="#home"

Bsrc="#home"

Clink="#home"

Durl="#home"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' instead of 'href' in anchor tags.

Using non-existent attributes like 'link' or 'url'.

The href attribute specifies the link's destination. Using other attributes like src, link, or url will not work for anchor tags.

4fill in blank

hard

Fill both blanks to create a navigation bar with accessible labels and semantic structure.

HTML

<[1] aria-label="Main navigation">
  <[2]>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </[2]>
</[1]>

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

Anav

Bsection

Cul

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

for navigation.

Not using

for the list of links.

The outer element should be <nav> for navigation. Inside it, the list of links should be inside an unordered list <ul>. The aria-label helps screen readers understand the navigation purpose.

5fill in blank

hard

Fill all three blanks to create a responsive navigation bar with semantic HTML and accessible links.

HTML

<[1] aria-label="Primary navigation">
  <[2] class="menu">
    <li><a href="#home" [3]>Home</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
  </[2]>
</[1]>

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

Anav

Bul

Caria-current="page"

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

for navigation.

Not marking the current page link for accessibility.

The navigation container is <nav>. The list of links is inside an unordered list <ul>. The aria-current="page" attribute marks the current page link for screen readers.