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.

Practice

1. What is the main purpose of the <nav> element in HTML?

easy

A. To create a footer section

B. To display images in a gallery

C. To group the main navigation links on a webpage

D. To add a paragraph of text

Solution

1. Step 1: Understand the role of <nav>

   The <nav> element is specifically designed to group navigation links.

2. Step 2: Compare with other elements

   Other elements like <footer> or <section> serve different purposes, not navigation grouping.

3. Final Answer:

   To group the main navigation links on a webpage -> Option C

4. Quick Check:

   Navigation grouping = <nav> [OK]

Hint: Remember: <nav> means navigation links grouping [OK]

Common Mistakes:

• Confusing <nav> with <footer>
• Using <nav> for non-navigation content
• Thinking <nav> is for styling only

2. Which of the following is the correct syntax to create a navigation section using the <nav> element?

easy

A. Home

B. Home

C. Home

D. Home

Solution

1. Step 1: Check the element name

   The correct HTML element for navigation is <nav>, not <navigation>.

2. Step 2: Verify proper structure for links

   Navigation links are best inside a list (<ul> with <li> and <a> tags) for semantics and accessibility.

3. Final Answer:

   <nav><ul><li><a href='#'>Home</a></li></ul></nav> -> Option A

4. Quick Check:

   Correct tag + list of links = <nav><ul><li><a href='#'>Home</a></li></ul></nav> [OK]

Hint: Use <nav> with <ul> and <li> for menus [OK]

Common Mistakes:

• Using <navigation> instead of <nav>
• Putting plain text instead of links inside <nav>
• Not using list elements for navigation links

3. What will be the visual result of this HTML code in a browser?

<nav>
  <ul>
    <li><a href='#home'>Home</a></li>
    <li><a href='#about'>About</a></li>
  </ul>
</nav>

medium

A. Two paragraphs with 'Home' and 'About' text

B. A horizontal menu with buttons labeled 'Home' and 'About'

C. An error message because <nav> cannot contain <ul>

D. A vertical list of clickable links labeled 'Home' and 'About'

Solution

1. Step 1: Understand default <ul> and <li> display

   By default, <ul> creates a vertical list with bullet points, and <li> items stack vertically.

2. Step 2: Check the <a> tags inside list items

   The <a> tags create clickable links labeled 'Home' and 'About'.

3. Final Answer:

   A vertical list of clickable links labeled 'Home' and 'About' -> Option D

4. Quick Check:

   Default list + links = vertical clickable list [OK]

Hint: Lists inside <nav> show vertical clickable menus by default [OK]

Common Mistakes:

• Assuming <nav> changes list layout automatically
• Thinking <nav> causes errors with <ul>
• Expecting horizontal menu without CSS

4. Identify the error in this navigation code:

<nav>
  <ul>
    <li>Home</li>
    <li><a href='#about'>About</a></li>
  </ul>
</nav>

medium

A. The first list item 'Home' is missing a link (<a> tag)

B. The <nav> element cannot contain <ul>

C. The <li> tags are not allowed inside <nav>

D. The href attribute is missing in the second link

Solution

1. Step 1: Check each list item content

   The first <li> contains plain text 'Home' without a clickable link.

2. Step 2: Confirm proper link usage

   Navigation items should be links (<a> tags) for accessibility and functionality.

3. Final Answer:

   The first list item 'Home' is missing a link (<a> tag) -> Option A

4. Quick Check:

   All nav items need <a> tags [OK]

Hint: Every nav item should be a link inside <li> [OK]

Common Mistakes:

• Leaving text without <a> inside <li>
• Thinking <nav> disallows <ul> or <li>
• Ignoring missing href attributes

5. You want to create a navigation menu inside a website header that is accessible and clearly identified by screen readers. Which is the best way to use the <nav> element?

hard

A. <header>
  <nav aria-label='Main navigation'>
    <ul>
      <li><a href='/home'>Home</a></li>
      <li><a href='/contact'>Contact</a></li>
    </ul>
  </nav>
</header>

B.

Home
Contact

C.

Home | Contact

D.

Home
Contact

Solution

1. Step 1: Use <nav> inside <header> for main navigation

   Placing <nav> inside <header> groups navigation logically.

2. Step 2: Add aria-label for accessibility

   The aria-label 'Main navigation' helps screen readers identify this menu clearly.

3. Step 3: Use list with links inside <nav>

   Using <ul> and <li> with <a> tags creates a semantic, accessible menu.

4. Final Answer:

   Use <nav> with aria-label and list of links inside header -> Option B

5. Quick Check:

   Accessible nav with aria-label = <header>   <nav aria-label='Main navigation'>     <ul>       <li><a href='/home'>Home</a></li>       <li><a href='/contact'>Contact</a></li>     </ul>   </nav> </header> [OK]

Hint: Add aria-label to <nav> for screen reader clarity [OK]

Common Mistakes:

• Not using <a> tags for navigation items
• Omitting aria-label for accessibility
• Using plain text instead of links inside <nav>