E-Learning Platform
Web Foundation I

Links

TeachesThe anchor elementThe href attributeRelative vs. absolute paths

Back in lesson one you learned that every page has an address — a URL, the web's version of a full mailing address. A link is how one page points a visitor at another page's address, and it's the reason the web is a web instead of a stack of disconnected pages sitting in isolation.

The anchor element

A link is written with the anchor element: a. On its own, a does nothing — it needs somewhere to point.

<a>click here</a>

That's a dead end: clickable-looking text going nowhere, the web equivalent of a doorbell with no house behind it. To make it a real link, it needs one more piece: an address to send the visitor to.

href: where the link goes

Tags can carry extra detail written right inside the opening tag — that's called an attribute. href is one, and it holds the destination: the address the browser goes to when someone clicks.

<a href="https://example.com/about">About us</a>

Everything between <a href="..."> and </a> is the clickable text a visitor sees; the href stays invisible until they click it.

Relative vs. absolute paths

An href can point at another site entirely, or at another page of your own, and HTML has a different style of address for each — the same way a mailing address changes depending on how far the letter is traveling.

  • An absolute path is a full address: the whole https://example.com/about you'd recognize from lesson one, country to door. Use one whenever you're linking somewhere outside your own site.
  • A relative path is more like telling someone "the door two down from here" — it only makes sense because you're both already standing on the same street. Written as only a filename or folder path with nothing in front of it, like contact.html, the browser fills in the rest using the page you're already on.
<a href="https://example.com/pricing">See pricing</a>
<a href="contact.html">Contact us</a>

The first link works from anywhere on the web. The second only makes sense relative to whatever page it's written on — which is exactly right when that page and the one it links to live side by side.

Common mistake

An a with no href at all — clickable-looking text and nothing else — isn't a real link; nothing happens when someone clicks it. Another common slip is writing a relative path where you meant an absolute one, or the reverse, so the link either points nowhere useful or breaks the moment the page moves. When you're unsure, ask: is this a full address to somewhere else, or a path to a page that lives right next to this one?

Exercise

Write exactly two a links. Give the first one an absolute href — a full address starting with https://, like https://example.com/about. Give the second one a relative href — only a path, with nothing in front of it, like contact.html, the way you'd point someone to a door on the same street instead of reciting the whole address again. Both links need real clickable text between the tags.