Nav element in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Purpose of the

Element

What is the main purpose of the

element in HTML?

A To add a footer section at the bottom of the page.

B To create a container for images and multimedia content.

C To define a section containing navigation links for the website.

D To style text with bold and italic effects.

💡 Hint

Think about what users use to move between pages on a website.

The

element is used to group navigation links that help users move around the website. It improves accessibility and semantic structure.

📝 Syntax

intermediate

Correct Usage of

with Links

Which of the following HTML snippets correctly uses the

element with navigation links?

A <nav><p>Home</p><p>About</p></nav>

B <nav><span>Home</span><span>About</span></nav>

C <nav><div>Home</div><div>About</div></nav>

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

💡 Hint

Navigation links should be clickable and grouped in a list.

Navigation links are best grouped inside a list (

) with each link inside a list item (
• ). This helps screen readers and organizes links clearly.

❓ rendering

advanced

Visual Result of a

Element with Flexbox

What will you see in the browser when this HTML and CSS code runs?

HTML

<nav style="display:flex; gap:1rem;"><a href="#">Home</a><a href="#">Services</a><a href="#">Contact</a></nav>

A Links arranged randomly with overlapping text.

B Three links arranged horizontally with space between them.

C Links hidden because <nav> cannot use flexbox.

D Three links stacked vertically with no space.

💡 Hint

Flexbox with display:flex arranges children in a row by default.

The

uses flexbox to place the links side by side with a gap of 1rem between them, so they appear horizontally spaced.

❓ accessibility

advanced

Improving Accessibility of a

Element

Which attribute improves accessibility by describing the purpose of a

element to screen readers?

A aria-label="Main navigation"

B style="color:blue"

C onclick="alert('nav clicked')"

D id="nav1"

💡 Hint

Screen readers use ARIA attributes to understand page sections.

The aria-label attribute gives a descriptive name to the navigation region, helping screen reader users understand its purpose.

❓ selector

expert

CSS Selector Targeting Only

Direct Child Links

Which CSS selector correctly styles only the elements that are direct children of a

element?

A nav > a { color: red; }

B nav + a { color: red; }

C nav a { color: red; }

D nav ~ a { color: red; }

💡 Hint

The '>' selector targets direct children only.

The selector nav > a applies styles only to elements that are immediate children of

. Other selectors target descendants or siblings differently.