Lesson 4 — Fundamentals

Links and Navigation

Hyperlinks are what make the web a web — the anchor element connects pages to each other, to other sites, and to specific sections within the same page.

The Anchor Element

The <a> tag creates a link using the href attribute to specify a destination. Links can point to other pages on your own site (relative URLs) or to entirely different websites (absolute URLs).

HTML — Links 
<a href="about.html">About Us</a>
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Docs</a>
<a href="mailto:info@example.com">Email Us</a>
<a href="#pricing">Jump to Pricing</a>

<h2 id="pricing">Pricing</h2>

Building a Navigation Menu

A navigation menu is typically a list of links wrapped in a <nav> element, which signals to browsers and assistive technology that this group of links is for site navigation.

<nav> <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>

Common Mistakes

  • Forgetting rel="noopener" on links that open with target="_blank", which is a minor but real security consideration.
  • Using a relative path that doesn't match the actual file structure, resulting in a broken link.
  • Linking to a section with #id when no element on the page actually has that id.
  • Wrapping non-navigational links in <nav>, which dilutes its meaning for assistive technology.

Professional Tip

Use relative URLs (like about.html or ../images/logo.png) for links within your own site. This keeps the whole site portable — it will work correctly whether it's hosted on a test server or the final domain.

Your Turn

Build a simple three-page site (index.html, about.html, contact.html) each with a nav menu linking to all three pages, using relative URLs.

Mini Quiz

What HTML attribute specifies where a link should go?