What is the difference between an absolute and a relative URL?

An absolute URL includes the full address with the protocol (https://example.com/page). A relative URL is a path from the current page, such as about.html or ../index.html, and is used for pages on the same site.

How do you link to a section further down the same page?

Give the section an id (for example id="contact") and link to it with href="#contact".

Why is "click here" poor link text?

It doesn't say where the link goes. Screen-reader users often list links out of context, and search engines use link text to understand the target page.

Links: Connecting Pages — HTML5 for Beginners: Build Your First Web Pages

What you'll learn

How to make a link with <a href>.
The difference between absolute and relative addresses.
How to link to a section of a page, an email address or a phone number.
How to write good link text.

The idea

Links are what make the web a web. They use the <a> (anchor) element and its href attribute (hypertext reference), which says where the link goes:

<a href="https://developer.mozilla.org">MDN Web Docs</a>

Absolute and relative addresses

An absolute address is the full address, including https://. Use it for other websites.
A relative address is a path from the current page. Use it for your own pages:

You're on	`href`	Goes to
`index.html`	`about.html`	`about.html` in the same folder
`index.html`	`blog/first-post.html`	a file inside the `blog` folder
`blog/first-post.html`	`../index.html`	up one folder, to `index.html`

Jumping within a page

Give the target element an id, then link to it with #:

<a href="#contact">Contact me</a>
...
<h2 id="contact">Contact</h2>

Email and phone links

<a href="mailto:[email protected]">Email me</a>
<a href="tel:+441234567890">Call us</a>

On a phone, a tel: link starts a call; a mailto: link opens the email app.

Opening a new tab

target="_blank" opens the link in a new tab. Use it sparingly (people can choose to open new tabs themselves), and tell users it will happen.

Good link text

Link text should say where the link goes, even when read on its own. Screen-reader users often list all the links on a page, and "click here" ten times tells them nothing.

Try it

Kinds of linksTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <h1 id="top">My favourite places to learn</h1>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN's HTML documentation</a></li>
    <li><a href="https://www.readycamel.com/tutorials/html" target="_blank">The ReadyCamel HTML tutorial (opens in a new tab)</a></li>
    <li><a href="#contact">Jump to my contact details</a></li>
  </ul>

  <p style="margin-top: 600px">Scroll down... or use the link above.</p>

  <h2 id="contact">Contact</h2>
  <p><a href="mailto:[email protected]">Email [email protected]</a></p>
  <p><a href="#top">Back to top</a></p>
</body>
</html>

Your turn

Add a link to your favourite website to the list, with descriptive link text.
Add an <h2 id="about">About</h2> section and a link at the top that jumps to it.
On your own computer, create about.html next to index.html and link the two pages to each other with relative links.

Common mistakes

Forgetting https:// in links to other sites. href="www.example.com" is treated as a file in your own folder.
"Click here" link text. Write "Download the 2026 timetable (PDF)" instead.
Wrong relative paths. Check the folder structure; use ../ to go up a folder.
Using a link for an action. Links go somewhere. For actions such as "Add to basket" use a <button>.

Key points

<a href="...">text</a> creates a link.
Use absolute addresses (https://...) for other sites and relative paths for your own pages.
href="#id" jumps to an element with that id; mailto: and tel: start emails and calls.
Link text should make sense on its own.