HTML Course 5.5 Creating simple navigation menus

1. Semantic wrapper: <nav>

The <nav> element groups a set of navigation links. Screen readers announce it as “navigation,” helping users understand the page structure.

2. Structuring links with lists

Using an unordered list (<ul>) inside <nav> is a widely accepted pattern. Each list item (<li>) contains a link (<a>).

Comments:

• <nav> defines the navigation region.
• aria-label adds an accessible name.
• <ul> groups links semantically.
• <li> and <a> form each menu item.

3. Adding ARIA roles and properties

Although <nav> implies a navigation role, you can explicitly declare it for older assistive technologies:

4. Nested (dropdown) menus

For a dropdown submenu, nest a second <ul> inside an <li>. Although styling and interactivity require CSS/JavaScript, the HTML structure is as follows:

Comments:

• First-level <ul> holds the main items.
• Nesting a second <ul> inside the <li> creates a dropdown.
• Each nested link is still wrapped in <li><a> for semantics and accessibility.

5. Keyboard focus and accessibility tips

• All links are naturally focusable via Tab.
• Use aria-haspopup='true' on a parent link to indicate a submenu:

  Products
  

    
Widgets
    
  

• Optionally add aria-expanded='false' (or 'true') on the submenu button to reflect open/closed state.
• Ensure submenu <ul> is hidden from screen readers when closed (via aria-hidden='true'), toggled to false when opened.
• Maintain a logical tab order and consider using focus trapping in complex menus (requires JavaScript).

Summary

Creating simple navigation menus in pure HTML focuses on using:

• The semantic <nav> wrapper
• Unordered lists for link grouping
• ARIA attributes for accessibility
• Nested lists for dropdowns
• Proper focus management

With these foundations, you have a robust, semantic, and accessible structure for navigation menus, ready for visual styling and interactivity enhancements.