Links

Links are what make the web a web. The a (anchor) element with an href attribute creates one:

<p>Read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML docs</a>.</p>
<p>Back to the <a href="index.html">home page</a>.</p>

The text between the tags — the link text — is what people click and what screen readers announce.

Kinds of links

<a href="https://example.com/">Another website</a>
<a href="about.html">Another page on this site</a>
<a href="#opening-hours">A section on this page</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+441234567890">Call +44 1234 567890</a>
<a href="/files/menu.pdf" download>Download the menu (PDF, 200 KB)</a>

• #opening-hours jumps to the element with id="opening-hours" — a fragment link. href="#" or href="#top" goes to the top of the page.
• mailto: opens the visitor's email program; tel: dials on phones.
• download asks the browser to save the file instead of opening it (for same-site files).

Jumping within a page

<nav>
  <a href="#ingredients">Ingredients</a> |
  <a href="#method">Method</a>
</nav>
<h2 id="ingredients">Ingredients</h2>
<p>Flour, water, salt, yeast.</p>
<h2 id="method">Method</h2>
<p>Mix, knead, rise, bake.</p>

Clicking "Method" scrolls to that heading, and the URL gains #method — so people can share a link to that exact section.

Opening in a new tab

<a href="https://example.com/" target="_blank" rel="noopener">Example (opens in a new tab)</a>

Use new tabs sparingly — people can choose to open one themselves — and say so in the link text. rel="noopener" stops the new page from getting a reference to yours (modern browsers now apply this by default for target="_blank", but writing it is harmless and protects older ones). Level 3 covers link security in detail.

Good link text

<!-- Avoid: meaningless link text -->
<p>To see our prices, <a href="prices.html">click here</a>.</p>

<!-- Better -->
<p>See our <a href="prices.html">prices and packages</a>.</p>

Screen-reader users often pull up a list of all links on a page. A list of "click here", "click here", "read more" is useless. Link text should make sense on its own.

Practice

Write a short table of contents with fragment links to three sections — "Overview", "Pricing", and "Contact" — and the three h2 headings with matching ids. Add an email link in the Contact section.

<ul>
  <li><a href="#overview">Overview</a></li>
  <li><a href="#pricing">Pricing</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<h2 id="overview">Overview</h2>
<p>We make bread.</p>
<h2 id="pricing">Pricing</h2>
<p>A loaf costs £3.</p>
<h2 id="contact">Contact</h2>
<p><a href="mailto:bread@example.com">bread@example.com</a></p>