Navigation structure basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of the

element in HTML?

Choose the best description of the

element's role in a webpage.

A It creates a container for all the main content on the page.

B It defines a section of navigation links to help users move around the site.

C It is used to add decorative images to the webpage header.

D It is used to embed videos and multimedia content.

💡 Hint

Think about what helps users find their way on a website.

The

element is specifically designed to hold navigation links, making it easier for users and assistive technologies to understand the site's structure.

📝 Syntax

intermediate

Which HTML snippet correctly creates a navigation bar with three links?

Select the valid HTML code that uses semantic elements for navigation.

A <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>

B <navigation><list><item><link href="#home">Home</link></item></list></navigation>

C <div><p><a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a></p></div>

D <nav><a>Home</a><a>About</a><a>Contact</a></nav>

💡 Hint

Remember to use semantic tags and proper nesting for lists and links.

Option A uses the correct semantic

element with an unordered list

and list items
• containing links . This is the best practice for navigation structure.

❓ rendering

advanced

What will the browser display for this navigation code?

Given the following HTML, what is the visible result in the browser?

HTML

<nav aria-label="Main menu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

A A vertical list of three clickable links labeled Home, Services, and Contact.

B An error message because aria-label is not allowed on <nav>.

C Plain text showing Home, Services, and Contact without links.

D Three buttons labeled Home, Services, and Contact arranged horizontally.

💡 Hint

Think about default browser styles for lists and links inside

.

The code creates a vertical list of links inside a navigation region. The

element with aria-label improves accessibility but does not change visual layout by default.

❓ selector

advanced

Which CSS selector targets only links inside the main navigation bar?

Choose the CSS selector that styles only elements inside a

element with class "main-nav".

A a.nav.main-nav

B .main-nav > a

C nav a.main-nav

D nav.main-nav a

💡 Hint

Remember how to select elements inside a specific class and tag.

Option D selects all elements inside any

element with class "main-nav". This is the correct way to target navigation links.

❓ accessibility

expert

What is the best ARIA attribute to improve screen reader navigation for a site menu?

Choose the ARIA attribute that correctly labels a navigation region for assistive technologies.

A role="button" on each <a> link inside <nav>

B aria-hidden="true" on the <nav> element

C aria-label="Primary navigation" on the <nav> element

D aria-live="polite" on the <nav> element

💡 Hint

Think about how to describe the navigation region clearly to screen readers.

Using aria-label on the

element gives screen readers a clear name for the navigation region, improving accessibility. Other options either hide content or misuse roles.

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