Nav element in HTML - Mini Project: Build & Apply

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

element to wrap the navigation links.

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
for the links.

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.

1

Create the basic HTML structure

Write the basic HTML5 skeleton with , including and , and containing an empty

and

element.

HTML

    
    My Website


    
        
    
    
        
    

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

element to hold the navigation links.

HTML

    
    My Website


    
        
            
        
    
    
    

Need a hint?

Place the

element inside the

to group navigation links semantically.

3

Add an unordered list with three links inside <nav>

Inside the

, add a

element. Inside the
, add three
• items each containing an link with exact text and href attributes: Home with href="/", About with href="/about", and Contact with href="/contact".

HTML

    
    My Website


    
        
            
                
            
        
    
    
    

Need a hint?

Use

for the list and inside it add three
• elements. Each
• should have an tag with the correct href and text.

4

Add aria-label to <nav> for accessibility

Add an aria-label="Primary navigation" attribute to the

element to help screen readers understand this is the main navigation area.

HTML

    
    My Website


    
        
            
                Home
                About
                Contact
            
        
    
    
    

Need a hint?

Add the aria-label attribute inside the opening

tag exactly as aria-label="Primary navigation".