Link between pages with relative paths and to sites with absolute URLs

A page on its own is a document. Pages that link to each other are a website. This lesson is where your project stops being one file.

The element is <a>, and the attribute that matters is href — the address the link points to.

<a href="about.html">About</a>

The text between the tags is what the visitor clicks. The href is where they land.

Words in this lesson

Two kinds of address

This is the distinction the whole lesson turns on.

Absolute URLs give the complete address, including the scheme and the host. Use them for pages that are not yours:

<a href="https://www.bbc.com/pidgin">BBC News Pidgin</a>

Relative URLs give a path relative to the page the link is written on. Use them for your own pages:

<a href="about.html">About</a>

The rule to remember: absolute for other people's sites, relative for your own.

Why relative links matter so much

Your site currently lives at a file:/// address on your laptop. In Module 7 it will live at an https:// address on a real host. If your internal links are relative, every one of them keeps working through that move, with nothing to change.

Write an absolute link to your own site and you tie the page to one address forever. Change host, change domain, or just work on the file offline, and it breaks.

Building a second page

Do this now, in my-first-site:

1. Create a new file called about.html.
2. Give it the full boilerplate — doctype, lang, charset, viewport, its own <title> and description.
3. Give it its own single <h1>, such as About Chidera Okeke.

Now link them. In index.html:

<p><a href="about.html">Read more about me</a></p>

And in about.html, a link back:

<p><a href="index.html">Back to the home page</a></p>

Save both, open index.html in Chrome, and click through. Two pages, one site.

Writing paths

Your folder looks like this:

my-first-site/
├── index.html
├── about.html
├── css/
└── images/
    └── shop-front.jpg

And if you later put a page inside a subfolder, ../ climbs back out one level:

<a href="../index.html">Home</a>

Read ../ as "go up one folder." Two of them, ../../, goes up two.

A leading slash — /about.html — means "start at the root of the site." That works well once the site is on a host, but behaves oddly from a file:/// address, where the root is your whole disk. Until Module 7, prefer plain relative paths with no leading slash.

The naming rules come back

Remember Module 1: lowercase, no spaces, hyphens not underscores. This is where breaking them bites.

About.html and about.html are the same file on your Windows laptop and two different files on the Linux server that will eventually host your site. A link that works perfectly today returns a 404 the day you publish, and it is a miserable bug to find because nothing changed in your code.

Type the file name into your link exactly as it appears on disk. Every time.

Opening a link in a new tab

For links to other people's sites, you may want the visitor to keep your page open:

<a href="https://www.bbc.com/pidgin" target="_blank" rel="noopener noreferrer">
  BBC News Pidgin
</a>

target="_blank" opens it in a new tab. The rel attribute is a security measure: noopener stops the new page from getting at your page through the window.opener connection, and noreferrer stops the browser sending the referring address.

Modern browsers apply noopener automatically with target="_blank", but writing it explicitly is still recommended for older ones. It costs nothing.

Use it sparingly. Never on your own internal links — a visitor moving around your site does not want six tabs. Reserve it for outbound links you genuinely want to keep people away from losing.

Link text: the part most people get wrong

MDN is direct about this:

The content inside a link should indicate where the link goes, even out of context.

Because a common way for people using screen reading software to navigate is to pull up a list of every link on the page, stripped of the sentences around them. A list that reads "here, here, click here, read more, here" is useless.

Don't:

<p>Learn more about our products <a href="/products">here</a>.</p>

Do:

<p>Learn more <a href="/products">about our products</a>.</p>

Same sentence, same destination. The second one still makes sense read on its own.

The test: read your link text with the rest of the sentence covered up. If it does not say where it goes, rewrite it.

Common mistakes

The short version

• Relative paths (about.html) keep working when the folder moves to a server. Absolute URLs (https://…) are for other people's sites.
• Because relative paths survive the move from your laptop to hosting, they're what you use inside your own site.
• The naming rules come back: lowercase, no spaces, or your links 404 online while working fine locally.
• target="_blank" opens a new tab — use it for external sites, not for your own pages.
• Link text must make sense read on its own. Screen reader users pull up a list of links; "click here" tells them nothing.

Try it yourself

Turn your single page into a two-page site:

1. Create about.html with a complete head and its own single <h1>.
2. Add a paragraph or three of real content to it.
3. Link from index.html to about.html, and back again. Test both directions in Chrome.
4. Add two links to other people's websites — real ones you actually use — with target="_blank" and rel="noopener noreferrer".
5. Check every link's text on its own. Cover the surrounding sentence. If any of them says "here" or "click here", rewrite it.
6. Break one deliberately: change about.html to About.html in the link, save, reload, and click it. It will probably still work on your laptop — which is exactly the trap. Change it back.
7. Open DevTools, inspect one of your links, and confirm the href in the tree is what you expected.

Keep both files. Every module from here adds to this same site.

You'll know you've got it when you can say, without checking, whether a link needs a relative path or a full URL — and your link text reads sensibly out of context.