Links and navigation: the anchor tag, done correctly

Links are what make HTML hypertext — the thing that makes it fundamentally different from a plain text document. This part covers the anchor tag properly, including two details that are easy to get subtly wrong: path types and safe external linking.

The anchor tag: <a href="...">

<a href="/subscriptions">Our Subscriptions</a>
<a href="/about">About Us</a>
<a href="/contact">Contact</a>

<a> (anchor) with an href attribute is the only element that creates a real, clickable link. Anything inside the opening and closing tags — text, an image, even a block of other elements — becomes part of the clickable target.

Relative vs. absolute paths: a real, meaningful difference

<!-- relative: resolved against the current page's own location -->
<a href="/subscriptions">Subscriptions</a>
<a href="subscriptions.html">Subscriptions (same folder)</a>
<a href="../index.html">Back to home (one folder up)</a>

<!-- absolute: a complete, standalone URL -->
<a href="https://www.techpurai.com/tutorials">TechPurAI tutorials</a>

A relative path is resolved against the current page's own address — /subscriptions means "the /subscriptions path on whatever domain this page is already on," which is exactly why internal navigation (part 8's real Bright Leaf Coffee nav) should always use relative paths, never a hardcoded https://brightleafcoffee.com/subscriptions. The practical reason matters directly: a relative link keeps working unchanged when the site moves from a local folder to a staging domain to production — a hardcoded absolute link to the current domain would need to be manually rewritten at every single step.

Linking to a real section on the same page

<a href="#brewing-guide">Jump to the brewing guide</a>

<!-- ...further down the same page -->
<h2 id="brewing-guide">Brewing Guide</h2>

An href starting with # links to an element elsewhere on the same page with a matching id attribute — genuinely useful for a real "on this page" table of contents, the same pattern this very tutorial series' own sidebar navigation uses.

Opening links in a new tab, safely

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  A real external link
</a>

target="_blank" opens a link in a new tab — appropriate for sending a visitor away from the site entirely (an external reference, a social profile), not for internal navigation, which should keep visitors in the same tab by default. When target="_blank" is used, rel="noopener noreferrer" should go with it every time: without it, the newly opened page can, in older browsers, gain partial access to the original page via window.opener — a real, documented security consideration, not a theoretical one.

Building Bright Leaf Coffee's real navigation

<nav>
  <a href="/">Home</a>
  <a href="/subscriptions">Subscriptions</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

This is the real navigation this series' project uses starting in part 8 — wrapped in a <nav> element (covered fully in the next part on semantic layout), using relative internal paths throughout, with no target="_blank" anywhere, since every one of these destinations is part of the same site.

Next: images — the <img> tag, real alt text, and responsive images that serve the right file size for the visitor's actual screen.