Links and how pages connect

Introduction

Before the web, documents were islands. The idea that made the web what it is was simple: any page can point to any other page, with no permission needed. That pointer is the link, and you will write thousands of them.

How it works

A link is an a element (for "anchor"). The clickable part is its content, and the destination is its href attribute.

Absolute URLs contain everything: https://developer.mozilla.org/en-US/docs/Web/HTML. They work from anywhere, so use them for other people's sites.

Relative URLs are directions from where the current page is. Imagine the page https://site.com/shop/index.html:

Use relative addresses within your own site. They keep working when the site moves to a new domain, and while you test on your own computer.

Fragments jump within a page. If an element has id="prices", the link href="#prices" scrolls to it. An id must be unique in the page. This is how a table of contents works.

Opening a new tab. target="_blank" opens a new tab. Use it sparingly, because people can already choose this themselves. When you do use it for a site you do not control, add rel="noopener", which stops the new page from getting a handle on the page that opened it. Modern browsers now apply this by default for _blank, but writing it costs nothing and protects visitors on older browsers.

Other schemes. href="mailto:hello@example.com" opens an email program, and href="tel:+8801700000000" starts a call on a phone.

The text matters. Screen reader users can list all the links on a page. Ten links that all say "click here" are useless in that list, and search engines also use link text to learn what the target is about.

Syntax

<a href="https://example.com">Example site</a>
<a href="about.html">About us</a>
<a href="#contact">Jump to contact details</a>

Example

Line by line

1. href="#hours" points to the element with id="hours" further down.
2. The second link is absolute, because it goes to a different site. It opens a new tab, with rel="noopener" for safety.
3. The empty div only adds height, so you can see the page scroll.
4. id="hours" gives the heading its address on the page.

Expected result

Clicking "See our opening hours" scrolls down to the heading in the preview. The links appear underlined and blue by default.

In the real world

Every menu, breadcrumb and "read more" is a link. On a large site, a broken relative path can take down a whole section, which is why teams run link checkers. Search engines discover pages largely by following links, so a page nobody links to may never be found.

Common mistakes

• Leaving out the scheme. href="www.site.com" is treated as a relative path, so it looks for a file with that name on your own site.
• Backslashes in paths. Windows uses them, the web does not: write images/cat.png.
• Vague link text such as "click here" or "more".
• Using a link for an action. A link goes somewhere. For an action on the page, use button.

Best practices

• Make the link text describe the destination.
• Do not open new tabs without a reason.
• Give ids short, meaningful, lowercase names.

Summary

A link is an a element with an href. Absolute URLs work from anywhere, relative URLs are directions from the current page, and fragments jump to an id. Good link text helps everybody, including readers who cannot see the page around it.

Mark lesson complete