Navigation structure basics in HTML - Mini Project: Build & Apply

Navigation Structure Basics

📖 Scenario: You are building a simple website for a local bakery. The website needs a clear navigation menu so visitors can easily find important pages like Home, About, Menu, and Contact.

🎯 Goal: Create a basic navigation bar using semantic HTML elements. The navigation should have links to Home, About, Menu, and Contact pages.

📋 What You'll Learn

Use the <nav> element to wrap the navigation links.

Use an unordered list <ul> inside the <nav> for the menu items.

Each menu item should be a list item <li> containing a link <a>.

Links should have the exact text: Home, About, Menu, Contact.

Use semantic HTML5 elements and proper nesting.

💡 Why This Matters

🌍 Real World

Navigation menus are essential for websites to help users find information quickly and easily.

💼 Career

Understanding semantic HTML and accessibility is crucial for front-end web development roles.

1

Create the basic HTML skeleton

Write the basic HTML5 document structure with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <title>Bakery Website</title>, and an empty <body>.

HTML

    
    Bakery Website


    

Hint

Start by typing the standard HTML5 document structure. Remember to include lang="en" in the <html> tag and set the charset to UTF-8.

2

Add the navigation container

Inside the <body>, add a <nav> element to hold the navigation menu.

HTML

    
    Bakery Website


    

Hint

Use the semantic <nav> tag to create a container for navigation links.

3

Add the unordered list with menu items

Inside the <nav>, add an unordered list <ul>. Inside the <ul>, add four list items <li> each containing a link <a> with the exact text: Home, About, Menu, Contact. Use href="#" for all links.

HTML

    
    Bakery Website


    
        
    

Hint

Remember to wrap each link inside a list item <li> and put all list items inside the <ul>.

4

Add accessibility with aria-label

Add an aria-label="Primary navigation" attribute to the <nav> element to improve accessibility for screen readers.

HTML

    
    Bakery Website


    
    
        
            Home
            About
            Menu
            Contact
        
    

Hint

Use the aria-label attribute on the <nav> tag to describe the navigation purpose 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