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.

Practice

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

easy

A. To define a section of navigation links

B. To add images to the page

C. To create a footer area

D. To style text with bold font

Solution

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

   The <nav> element is designed to group navigation links on a webpage.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated HTML functions like footers, images, or text styling.

3. Final Answer:

   To define a section of navigation links -> Option A

4. Quick Check:

   Navigation = <nav> section [OK]

Hint: Remember: <nav> groups navigation links only [OK]

Common Mistakes:

• Confusing <nav> with <footer>
• Thinking <nav> adds images
• Using <nav> for styling text

2. Which of the following is the correct way to start a navigation section in HTML?

easy

A. <navigation>

B.

C. <nav>

D.

Solution

1. Step 1: Recall the correct HTML tag for navigation

   The official HTML5 tag for navigation is <nav>.

2. Step 2: Check other options for validity

   Tags like <navigation>, <nav-section>, and <nav-area> are not valid HTML tags.

3. Final Answer:

   <nav> -> Option C

4. Quick Check:

   Correct tag = <nav> [OK]

Hint: Use exactly <nav> to start navigation [OK]

Common Mistakes:

• Using non-standard tags like <navigation>
• Adding extra words in tag names
• Confusing with other section tags

3. What will the following HTML code display in a browser?

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

medium

A. A form with input fields

B. A list of clickable links labeled Home, About, Contact

C. An error message in the browser

D. Plain text showing the HTML code

Solution

1. Step 1: Understand the HTML structure

   The code uses <nav> with an unordered list <ul> containing list items <li> each with a link <a>.

2. Step 2: Predict the browser rendering

   The browser will show a vertical list of clickable links labeled Home, About, and Contact.

3. Final Answer:

   A list of clickable links labeled Home, About, Contact -> Option B

4. Quick Check:

   Navigation list = clickable links [OK]

Hint: Lists inside <nav> create clickable menus [OK]

Common Mistakes:

• Thinking code shows as text
• Expecting a form instead of links
• Assuming browser error

4. Identify the error in this navigation HTML code:

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

medium

A. Missing closing </a> tag for the Home link

B. The <ul> tag is not allowed inside <nav>

C. The <li> tags should be replaced with <div>

D. The href attribute should not have quotes

Solution

1. Step 1: Check the anchor tags inside list items

   The first list item has <a href='home.html'> but no closing </a> before the </li>.

2. Step 2: Validate other tags and attributes

   The <ul> inside <nav> is valid, <li> is correct, and href values should be quoted.

3. Final Answer:

   Missing closing </a> tag for the Home link -> Option A

4. Quick Check:

   Anchor tags must close properly [OK]

Hint: Every needs a closing before [OK]

Common Mistakes:

• Forgetting to close <a> tags
• Thinking <ul> is invalid inside <nav>
• Removing quotes from href

5. You want to create a navigation bar that is accessible and responsive. Which combination of HTML and CSS practices is best?

hard

A. Use <header> only, no lists, and inline styles for positioning

B. Use <div> with <p> tags for links, no ARIA, and float for layout

C. Use <nav> with <span> for links, no semantic tags, and fixed widths

D. Use <nav> with a <ul> of links, add ARIA labels, and style with Flexbox for layout

Solution

1. Step 1: Identify semantic HTML for navigation

   The <nav> element with a list (<ul>) of links is the correct semantic structure.

2. Step 2: Accessibility and responsive layout

   Adding ARIA labels improves accessibility. Using Flexbox in CSS helps create a responsive layout that adapts to screen sizes.

3. Final Answer:

   Use <nav> with a <ul> of links, add ARIA labels, and style with Flexbox for layout -> Option D

4. Quick Check:

   Semantic + ARIA + Flexbox = best practice [OK]

Hint: Combine semantic tags, ARIA, and Flexbox for best navigation [OK]

Common Mistakes:

• Using non-semantic tags for navigation
• Ignoring accessibility with ARIA
• Using outdated float instead of Flexbox