Bird
Raised Fist0
HTMLmarkup~30 mins

Nav element in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Simple Navigation Bar with <nav>
📖 Scenario: You are building a website header that includes a navigation bar. This bar will help users move between different pages of the site easily.
🎯 Goal: Build a navigation bar using the element with three links: Home, About, and Contact.
📋 What You'll Learn
Use the semantic
Include three links with exact text: Home, About, Contact.
Each link should have an href attribute with values: '/', '/about', '/contact' respectively.
Use an unordered list
    inside the
Ensure the HTML includes a
and
section for semantic structure.
💡 Why This Matters
🌍 Real World
Navigation bars help users move around websites easily. Using semantic tags and accessibility features makes your site friendly for everyone.
💼 Career
Web developers often build navigation menus. Knowing semantic HTML and accessibility is essential for professional web development.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with , including and My Website, and containing an empty
and
element.
HTML
Hint
Start with the basic HTML5 page structure including , , and . Add empty
and
tags inside the body.
2
Add the <nav> element inside the header
Inside the existing
, add a
HTML
Hint
Place the

Practice

(1/5)
2. Which of the following is the correct syntax to create a navigation section using the <nav> element?
easy
A.
B.
C.
D.

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.
C.
D.

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

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard