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.

Exercise

Create two files and link them in both directions. Open each directly from disk and confirm that every relative path still resolves.