Session 4 — Links and paths

You will connect pages with the anchor element (<a href="...">). The skill is choosing between absolute URLs (full address, other sites) and relative URLs (paths within your own site), reading the folder grammar (pages/contact.html, ../index.html), and wiring email links, new-tab links, and same-page section jumps. You will also practice the discipline of descriptive link text and build the Harbor Café navigation.

Plan: ideas → worked links → bridge → short drills → reveal.

Time: about 55–65 minutes if you write the folder walk for every path before reading the reveal.

Session 4 — Links and paths

The one-paragraph story

Links are what make the web the web. The anchor element (a) wraps content and, with an href attribute, turns it into a destination: <a href="menu.html">Our menu</a>. The href value is a URL, and the skill is choosing between two kinds — absolute URLs (the full address, for other sites) and relative URLs (paths within your own site, for your own pages). Underneath both is a simple path grammar: folders, .. to go up, file names to land. You will also learn email links, opening links in a new tab, and the discipline of making link text say where it goes. This session wires the Harbor Café site together — a navigation bar of links that finally makes it feel like a website.

---

The anchor element

<a href="menu.html">Our menu</a>

• a — the anchor; an inline element that wraps text (or images).
• href — the destination, standing for "hypertext reference".
• The content between the tags — "Our menu" — is what the user sees and clicks.

Clicking the link sends the browser to menu.html. The href value can be almost anything with a location: another page, an image, an email address, a section of the current page.

---

Absolute URLs: pointing at another site

An absolute URL is the complete address — scheme, domain, path:

<a href="https://roastery.example/beans">Buy beans at the roastery</a>

The pieces: https:// is the scheme (the protocol), roastery.example is the domain, /beans is the path on that server. Use absolute URLs when the destination lives on a different site. The browser leaves the current site and loads the full address.

---

Relative URLs: pointing within your own site

A relative URL gives the path from the current page's location to the destination, on the same server. No scheme, no domain — just the path:

<a href="menu.html">Our menu</a>
<a href="pages/contact.html">Contact us</a>

The browser resolves these against the current page's address. menu.html means "the file menu.html in the same folder as this page"; pages/contact.html means "go into the pages folder, then contact.html". Use relative URLs for your own pages — they keep working when the site moves to a new domain, and they are what you maintain as the site grows.

---

Path grammar: folders, files, and ..

The path in a relative URL follows folder logic:

• menu.html — a file in the current folder.
• pages/contact.html — down into pages, then contact.html.
• ../index.html — up one folder (..), then index.html.

The special name .. means "the parent folder". Every .. climbs one level. A file that lives one folder up from the current page is reached with one ..; two levels up needs two (../../images/logo.png).

Consider the Harbor Café site's folder layout:

harborcafe/
├── index.html
├── menu.html
├── pages/
│   └── contact.html
└── images/
    └── logo.png

From menu.html (in the root), the link to contact.html is pages/contact.html (down into pages). From pages/contact.html, the link back to the home page is ../index.html (up to the root, then index.html), and the logo is ../images/logo.png. Paths always describe the walk from where the current page is.

---

Email links

An href starting with mailto: opens the visitor's mail program:

<a href="mailto:hello@harborcafe.example">Email the café</a>

You can even pre-fill the subject: mailto:hello@harborcafe.example?subject=Catering. The browser hands the address to the user's mail app rather than navigating.

---

Opening in a new tab

By default a link replaces the current page. To open the destination in a new tab, add the target attribute:

<a href="https://roastery.example/beans" target="_blank">Roastery site</a>

target="_blank" opens a new tab. Use it sparingly — links to other sites are the usual case, so the visitor does not leave your site. Internal navigation links normally stay in the same tab.

---

Link text should say where it goes

The visible text of a link matters more than it looks. Two habits:

• Make the text descriptive: "Read the full menu" beats "click here". Screen-reader users hear a list of link texts in isolation — a page of "click here" links is a page of identical items.
• Do not link whole sentences you did not mean as destinations — link just the phrase that names the destination.

<!-- Weak -->
<p>See the menu by clicking <a href="menu.html">here</a>.</p>

<!-- Better -->
<p>Browse the <a href="menu.html">full menu</a>.</p>

---

Links to sections of a page

A link can jump to an element elsewhere on the page by its id attribute, using a #:

<a href="#hours">Jump to opening hours</a>
...
<h2 id="hours">Opening hours</h2>

The destination element carries an id (a unique page-wide name), and the link references it with #hours. The same trick works across pages: menu.html#coffee jumps to the coffee section of the menu page.

---

Pitfalls to watch for

• href belongs on the anchor's opening tag — a href="..." content </a>, never a content </a href="...">.
• Absolute for other sites, relative for your own — absolute URLs on your own pages break when you move domains.
• .. climbs one folder — count the levels when the path feels wrong.
• Descriptive link text — "here" and "click" say nothing about the destination.

Session 4 — Worked examples

The Harbor Café site folder layout (same as the concept):

harborcafe/
├── index.html
├── menu.html
├── pages/
│   └── contact.html
└── images/
    └── logo.png

Example A — A navigation bar of relative links

From index.html:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="pages/contact.html">Contact</a></li>
  </ul>
</nav>

Each link is a relative path from the home page's folder:

• index.html — the home page itself (linking to where you are is harmless; many sites do it so the nav is the same everywhere).
• menu.html — a sibling file in the root.
• pages/contact.html — down into the pages folder.

The list structure (Session 3) wraps the links — this nav-inside-ul-inside-li-inside-a pattern is the classic navigation menu, and Session 13 will lay it out horizontally with CSS.

---

Example B — Climbing up with ..

From pages/contact.html, the way back:

<a href="../index.html">Home</a>
<a href="../menu.html">Menu</a>
<a href="mailto:hello@harborcafe.example">Email us</a>

• ../index.html — up one folder to the root, then index.html.
• ../menu.html — up to the root, then menu.html.
• mailto: — not a file at all; it opens the mail program. Notice it needs no path logic.

---

Example C — Absolute URL to another site

<p>We buy beans from <a href="https://roastery.example" target="_blank">the
roastery</a>, who publish their origins online.</p>

Full address: scheme https://, domain roastery.example, and no path (the site's root). Because the destination is on another site, the URL is absolute. target="_blank" keeps the café's tab open alongside.

---

Example D — Images inside links

An image can be the clickable content of an anchor:

<a href="menu.html">
  <img src="images/menu-board.jpg" alt="The café menu board">
</a>

Clicking the photo of the menu board opens the menu page. The alt text matters twice here: it describes the image, and it is also the "link text" a screen reader announces — so "The café menu board" is a meaningful destination description.

---

Example E — Jumping to a page section

<h2 id="hours">Opening hours</h2>
<p>Daily, 7:00–15:00. The kitchen closes at 14:00.</p>
...
<p><a href="#hours">See our opening hours</a></p>

• The destination heading carries id="hours" (unique on the page).
• The link's href="#hours" jumps straight to it.

From another page, the same section is reached with menu.html#hours — a relative path plus the # fragment.

---

Example F — Reading and writing paths

Given the layout, which path takes the logo from menu.html and from pages/contact.html?

• From menu.html: the logo is in the root's images folder → images/logo.png.
• From pages/contact.html: images is one level up, so first .., then images/logo.png → ../images/logo.png.

The rule is always "walk from where this page lives". Say the walk out loud: from the contact page, go up one folder, into images, open logo.png — that is ../images/logo.png.