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.