Links and site navigation

A link needs a destination and a useful name

The href identifies the destination. The visible text should make sense when read away from its surrounding sentence.

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/services.html">Services</a>
  <a href="/contact.html">Contact</a>
</nav>

<p>Read the <a href="/accessibility-policy.html">accessibility policy</a>.</p>

Avoid repeated “click here” labels. Links are not buttons: use a button for an action on the current page and a link for navigation.

Relative and absolute URLs

A relative URL such as contact.html resolves from the current page. A root relative URL such as /contact.html resolves from the site root. An absolute URL includes the scheme and host.

Accessibility implication

Keyboard users expect to reach every link, and screen-reader users often scan a page by links. Do not remove visible focus or use JavaScript-only navigation when a normal anchor works.

How browsers actually behave

Following an anchor updates browsing history and requests the resolved URL. A fragment such as #hours targets an element with the matching id. The browser can expose visited state, copy the destination, open it in a new tab, and show the target in a status area because the destination is present in href. Scripted generic elements lose those ordinary capabilities.

URL resolution depends on the current document URL, not the source file's visual location in an editor. contact.html from /services/index.html resolves differently from /contact.html. Directory indexes, trailing slashes, case sensitivity, and deployment rewrites can hide mistakes locally, so test the real host.

Decisions and trade-offs

Use root-relative links when pages share one domain root and ordinary relative links when an artifact must work from a movable folder. Use absolute URLs for another origin and for metadata that requires a complete canonical identity. Do not open every external link in a new tab. If a new context is necessary, communicate it and use rel="noopener" where appropriate.

Navigation should represent stable destinations. A button changes the current interface; a link goes somewhere. Styling either to look like the other does not change this contract.

Accessibility consequences

Link text should identify purpose from the sentence or link list. Repeated “learn more” links force a person to reconstruct context. When an icon is the only content, supply a clear accessible name; when text already names the link, hide decorative icons from the accessibility tree.

A skip link lets keyboard users bypass repeated navigation and reach main content. Current-page state should be communicated with text or aria-current, not color alone. Focus must remain visible, including after fragment navigation.

Common failures and fixes

• A nested page links to the wrong file. A relative URL resolves from the current directory. Use the correct ../ path or a root-relative destination.
• A link works locally but 404s in production. Filename case differs. Match exact deployed casing and include direct-route checks.
• Pressing a card does nothing with a keyboard. A generic container owns click behavior. Put a real anchor around the appropriate content.
• Every link opens a tab. Target behavior was applied indiscriminately. Preserve user choice unless the workflow genuinely requires a new context.

Verify it

Use the browser status display and DOM inspector to confirm each href. Navigate forward, back, open in a new tab, copy the address, and activate every link by keyboard. Open each important page directly rather than only through the home page. Run a broken-link checker, then request the deployed URLs and verify status codes and redirects. At 320 CSS pixels, confirm long link text wraps and focus stays visible.

Exercise and next step

Create two files and link them in both directions. Open each directly from disk and confirm that every relative path still resolves. Next, add an image whose alternative and dimensions remain useful when the link or image fails.

Boundary of this lesson

Good anchors do not by themselves create a good information architecture. Destinations still need distinct user jobs, stable ownership, accurate metadata, and useful return paths. Avoid expanding navigation until every item earns its place; a shorter curated route is often easier to scan than a menu that mirrors the entire repository. Measure whether people can predict and reach the destination, not merely whether an automated checker sees a valid href.

Include redirects and failure recovery in that measurement. Request an old address, a mistyped address, and the canonical destination directly; confirm the first takes one permanent hop and the second offers useful routes without pretending to succeed. Navigation quality includes how safely people recover when a link or remembered URL is imperfect.