HTML Navigation: Semantic Architecture

The core of navigation architecture relies on two nested layers: the <nav> landmark and the <ul> unordered list.

The <nav> tag is an explicit architectural signal. It tells the browser 'This specific block of code contains primary routing data'. However, the <nav> alone is insufficient. Inside it, you MUST wrap your links inside an unordered list (<ul> and <li>). Why? Because assistive technologies rely on lists to dynamically calculate totals. By nesting links within a list, a screen reader can programmatically announce 'Navigation Menu, 5 items', instantly orienting visually impaired users.

A well-engineered navigation menu highlights the active page visually (e.g., underlining the 'About' link when viewing the About page). However, CSS styles are completely invisible to software routines.

To replicate this logic programmatically, you must explicitly inject the aria-current="page" attribute into the specific <a> tag representing the active view. This ARIA (Accessible Rich Internet Applications) directive hooks directly into the operating system's accessibility API, guaranteeing that screen readers announce not just the link, but its explicit status as the user's current spatial location.

Enterprise architectures feature multiple navigation clusters: primary headers, secondary sidebars, and massive footer matrices. Deploying multiple <nav> tags is correct, but it creates a critical parsing error: software engines cannot tell them apart.

To fix this collision, developers must strictly disambiguate each region using the aria-label attribute directly on the <nav> tag. By assigning aria-label="Primary" and aria-label="Footer", you establish unique, named architectural zones. Users can immediately identify the structure and jump instantly between targeted navigation blocks.