HTMLmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a 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.

Add the navigation container

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

HTML




    
    Bakery Website

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

Use the aria-label attribute on the <nav> tag to describe the navigation purpose for screen readers.