Nav element in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a navigation section using the correct HTML tag.

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'

Adiv

Bsection

Cnav

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic

or

instead of

for navigation links.

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

2fill in blank

medium

Complete the code to add an accessible label to the navigation element.

HTML

<nav aria-[1]="main-nav">
  <h2 id="main-nav">Main navigation</h2>
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

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

Alabelledby

Blabel

Clabelled-by

Dlabelled

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect attribute names like 'aria-label' when referencing another element.

Misspelling the attribute name.

The aria-labelledby attribute is used to provide an accessible name for the navigation region by referencing an element that labels it. Alternatively, aria-label can be used for a direct label.

3fill in blank

hard

Fix the error in the navigation list by completing the missing tag.

HTML

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

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

A<li>

B<ul>

C<nav>

D<section>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or
tags inside the list incorrectly.

Forgetting to open the list item tag.

Each navigation link inside a list should be wrapped in a <li> (list item) tag. The missing opening <li> tag causes invalid HTML.

4fill in blank

hard

Fill both blanks to create a navigation with a heading and a list of links.

HTML

<nav aria-[1]="nav-heading">
  <h2 id="nav-heading">[2]</h2>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>

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

Alabelledby

Blabel

CNavigation

DMenu

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-label' instead of 'aria-labelledby' when referencing an element id.

Using generic or unrelated heading text.

The aria-labelledby attribute references the heading's id to label the navigation region. The heading text 'Navigation' describes the purpose of the links.

5fill in blank

hard

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

HTML

<nav aria-[1]="main-nav">
  <h2 id="main-nav">[2]</h2>
  <ul>
    <li><a href="[3]">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

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

Alabelledby

BMain Navigation

C#home

Daria-label

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-label' instead of 'aria-labelledby' when referencing an element id.

Using a full URL or unrelated string for the Home link href.

Omitting the heading or aria attributes.

The aria-labelledby attribute points to the heading with id 'main-nav' which contains the text 'Main Navigation'. The first link uses #home as the href to navigate to the home section.