04. Links and Navigation

Links connect pages and resources. Clear navigation helps visitors understand where they are and where they can go next.

Create links

<a href="about.html">Learn about us</a>
<a href="https://example.com">Visit Example</a>
<a href="#contact">Jump to contact details</a>
<a href="mailto:hello@example.com">Email us</a>

A relative URL such as about.html points to a file in your site. An absolute URL includes the full address. A fragment beginning with # points to an element whose id matches that value.

Build navigation

<nav aria-label="Main navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Link accessibility

• Use meaningful link text instead of “click here.”
• Make each link purpose clear when read by itself.
• If a link opens a new tab, tell the user and add rel="noopener".

Practice activity

Create a three-item navigation menu and add a link that jumps to a contact section near the bottom of your page.