HTML Links

HTML links are what turn separate documents into a web. A single element, <a> (short for “anchor”), lets visitors move between pages, jump to a section, start an email or even dial a phone number. In this lesson you will learn how to write each kind of link and how to make links clear for everyone. You already know how attributes work from HTML Elements and Attributes – links depend on one in particular: href.

The anchor element and href

A link is written like this: <a href="https://developer.mozilla.org/">MDN Web Docs</a>. The href (hypertext reference) attribute holds the destination, and the content between the tags is the clickable link text. Without an href, an <a> element is just a placeholder and is not focusable or clickable.

Absolute and relative URLs

An absolute URL is the full address, including the scheme (https://) and the domain. Use absolute URLs when linking to another website.

A relative URL is a path worked out from the current page’s location. Use relative URLs for pages on your own site – they are shorter and keep working if your domain changes. Imagine this folder structure:

my-website/
├── index.html
├── contact.html
└── tours/
    ├── index.html
    └── kerala.html

Jump links within a page

You can link to a specific part of a page using a fragment: a # followed by the id of the target element. Long articles often use this for a table of contents. To link to a section on a different page, add the fragment after the file name, e.g. tours/kerala.html#houseboats.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jump links</title>
  <style>
    section, h2 { scroll-margin-top: 1rem; }
    h2 { margin-top: 70vh; }
  </style>
</head>
<body>
  <h1>Kerala travel notes</h1>
  <nav aria-label="On this page">
    <a href="#munnar">Munnar</a> |
    <a href="#alappuzha">Alappuzha</a> |
    <a href="#varkala">Varkala</a>
  </nav>

  <h2 id="munnar">Munnar</h2>
  <p>Tea estates, cool weather and misty mornings.</p>

  <h2 id="alappuzha">Alappuzha</h2>
  <p>Backwaters and houseboat stays.</p>

  <h2 id="varkala">Varkala</h2>
  <p>Red cliffs above a quiet beach.</p>
  <p><a href="#top">Back to top</a></p>
</body>
</html>

The large top margin in the CSS is only there to make the page long enough to see the jump. The special fragment #top always scrolls to the top of the document.

Email, phone and download links

The href does not have to point to a web page:

• mailto: opens the visitor’s email app with a new message, e.g. href="mailto:[email protected]".
• tel: starts a phone call on mobiles, e.g. href="tel:+914132000000". Write the number in international format without spaces.
• The download attribute asks the browser to download the linked file instead of opening it. It only works for files on the same site (same origin).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kinds of links</title>
</head>
<body>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN HTML docs</a> (opens in a new tab)</li>
    <li><a href="mailto:[email protected]">Email our bookings team</a></li>
    <li><a href="tel:+919876543210">Call +91 98765 43210</a></li>
  </ul>
</body>
</html>

Opening HTML links in a new tab

Adding target="_blank" opens the link in a new tab or window. Use it sparingly. Opening new tabs without warning can confuse people, especially screen reader users, and breaks the browser’s Back button. It is reasonable for things like a help page opened in the middle of filling in a form. When you do use it, tell visitors, for example with “(opens in a new tab)” in the link text.

In older tutorials you will see rel="noopener" added for security. Modern browsers now apply that protection automatically for target="_blank", but adding it does no harm.

Writing good link text

Screen reader users can pull up a list of all the links on a page, read out of context. A list full of “click here” and “read more” is useless. Good link text describes the destination on its own.

• Poor: To see our Kerala tours, click here.
• Better: See our Kerala tour packages. – with only the words “Kerala tour packages” inside the link: See our <a href="kerala.html">Kerala tour packages</a>.

HTML links are often styled to look like buttons or menu items. You will learn how in CSS Selectors, using states like :hover and :focus-visible. Next, you will add pictures to your pages in HTML Images.

Further reading

• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a
• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links
• html.spec.whatwg.org/multipage/links.html
• w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html