Links That Open Where You Meant Them To

A relative link is resolved from the current document, not from the folder you happened to open in your editor. Make that relationship visible with a small local site before diagnosing a larger site's routing.

You will create three files in two subfolders. There is no form submission, server or external destination in this exercise. Use forward slashes in href paths.

Create the folder structure

link-lab/
  index.html
  pages/
    contact.html
  help/
    shipping.html

Make the folders first. Save each complete document below at the stated location. File explorers may hide familiar extensions, so confirm that the files are HTML rather than names ending in .html.txt.

Save the starting page

Save this as link-lab/index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A local link lab</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    a { color: #034bff; }
    a:focus-visible { outline: 3px solid #034bff; outline-offset: 3px; }
    section { margin-block: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>Local link lab</h1>
    <ul>
      <li><a href="pages/contact.html">Contact details</a></li>
      <li><a href="help/shipping.html">Shipping guide</a></li>
      <li><a href="#rates">Sample rates on this page</a></li>
      <li><a href="help/shipping.html" target="_blank" rel="noopener">Shipping guide (new tab)</a></li>
    </ul>
    <section id="rates"><h2>Sample rates</h2><p>No live delivery prices are provided by this example.</p></section>
  </main>

</body>
</html>

Save the contact page

Save this as link-lab/pages/contact.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact details</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    a { color: #034bff; }
  </style>
</head>
<body>
  <main>
    <h1>Contact details</h1>
    <p>This is a local navigation example, not a contact endpoint.</p>
    <p><a href="../index.html">Back to the link lab</a></p>
    <p><a href="../help/shipping.html">Read the shipping guide</a></p>
  </main>

</body>
</html>

Save the shipping page

Save this as link-lab/help/shipping.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shipping guide</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    a { color: #034bff; }
  </style>
</head>
<body>
  <main>
    <h1>Shipping guide</h1>
    <p>Check the destination and order reference before asking about delivery.</p>
    <p><a href="../pages/contact.html">Contact details</a></p>
    <p><a href="../index.html#rates">Sample rates in the link lab</a></p>
  </main>

</body>
</html>

Follow each route and explain it

1. Open index.html. Contact details should reach the file inside pages.
2. From Contact details, follow the shipping link. The first .. moves up from pages to link-lab, then the path enters help.
3. From Shipping, follow the sample-rates link. It goes up to index.html and then selects its rates fragment.
4. Return to index.html and choose the ordinary shipping link. It should use the current tab.
5. Choose “Shipping guide (new tab)”. The browser should open a separate browsing context while keeping the starting page available.

A browser setting may choose a window instead of a tab. The link text signals the intentional context change. Reserve it for a reason rather than making every outbound or supporting link interrupt navigation.

Diagnose the wrong folder

On the contact page, temporarily change ../help/shipping.html to help/shipping.html. The browser now looks under pages/help, which this site does not contain. Restore the parent step after reproducing the missing destination.

Inspect a link's resolved href in DevTools. You can also evaluate new URL('help/shipping.html', document.baseURI).href in the Console. A base element, if present, changes URL resolution; this lab deliberately has none. Production servers may also have routing or case-sensitivity rules that differ from local files.

Use absolute and root-relative URLs deliberately

A full URL such as https://example.com/help/shipping.html supplies its own origin and path. A leading slash supplies a path from the current origin's root on HTTP sites. It is not the same as “the folder containing this project”, and file URLs have different roots. Keep the relative paths in this lab so it works when the whole folder moves.

Mailto and tel links ask an available application to handle an address or number. They do not guarantee that a mail app is configured or that a call has been placed. Give them clear visible labels and test on the devices you support.

State the new-tab relationship accurately

The example explicitly uses rel="noopener" to avoid giving the opened page an opener relationship. Modern HTML also gives ordinary target-blank links implicit noopener behavior unless an opener is requested. It is inaccurate to say that every modern target-blank link automatically exposes window.opener.

noreferrer additionally suppresses referrer information. Add it when that privacy choice is intended; it is not required merely to make an ordinary relative link work. See the HTML link specification for the relationship.

Add one deeper destination

Create help/returns.html by adapting the shipping page. Add a link from contact.html and a return link to the index rates section.

Expected result: the contact link starts with ../help/, and the new page's return link starts with ../index.html#rates. The original pages remain reachable after moving the whole link-lab folder. If a destination fails, inspect the resolved path before changing unrelated markup.