MENU


Hyperlinks

The <a> (anchor) element turns its content into a link to the URL in its href attribute. The URL can be absolute, relative to the page (or to <base>, Head), a fragment such as #faq that scrolls to the element with that id, or another scheme handled by the operating system. An <a> without href is only a placeholder: not focusable, not announced as a link. target takes _self (the default), _blank, _parent, _top or a frame name.

Attributes of the a element
Attribute Purpose Example
href Destination URL or fragment href="/pricing#pro"
target Browsing context to open in target="_blank"
rel Relationship to the target rel="nofollow"
download Download, optional file name download="list.pdf"
hreflang, type Language, MIME type hints hreflang="de"
referrerpolicy What to send as Referer "no-referrer"
ping URLs to POST to on click ping="/track"
Common kinds of linksHTMLLive
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
  <style>
    body { font: 15px/1.5 system-ui, sans-serif; margin: 12px; }
    p { margin: 0 0 6px; }
    a.card { display: block; width: 280px; padding: 8px; border: 1px solid #99a;
             border-radius: 8px; color: inherit; text-decoration: none; }
  </style>
</head>
<body>
  <p>Jump to the <a href="#faq">FAQ</a> or open
    <a href="https://developer.mozilla.org/" target="_blank">MDN (opens in new tab)</a>.</p>
  <p>Email <a href="mailto:sales@example.com?subject=Quote%20request&amp;cc=boss@example.com">
    sales</a>, call <a href="tel:+14155550123">+1 415 555 0123</a>, text
    <a href="sms:+14155550123?body=Hi">us</a>, or chat on
    <a href="https://wa.me/14155550123?text=Hi">WhatsApp</a>.</p>
  <p><a href="/files/prices.pdf" download="prices-2026.pdf">
    Download price list (PDF, 240 KB)</a></p>
  <a class="card" href="/courses/html">
    <strong>HTML Fundamentals</strong><br>12 lessons. The whole card is one link.
  </a>
  <h2 id="faq">FAQ</h2>
</body>
</html>
Browser output of Listing 2.12
Browser output of 12

mailto: accepts subject, cc, bcc and body parameters, percent-encoded and joined with &amp; in HTML. Write tel: numbers in international + format without spaces; wa.me takes the number without + or leading zeros. The skype: scheme found in older tutorials is dead: Microsoft retired Skype on May 5, 2025. The card shows that <a> has a transparent content model: it may wrap headings and paragraphs, but never other interactive content such as links, buttons or inputs. download works only for same-origin, blob: and data: URLs, which lets a script generate a file in memory and set link.href = URL.createObjectURL(blob).

Text fragments link to a passage on a page you do not control, even without an id: https://example.com/article#:~:text=first%20words,last%20words. The browser scrolls to the match, highlights it (style it with ::target-text), and ignores the directive if the text is not found. They work in Chrome 81 1 , Edge 83, Safari 16.1 10 and Firefox 131 555 .

target="_blank" and rel

A page opened with target="_blank" once received a window.opener reference and could silently redirect your tab to a phishing copy, an attack called tabnabbing. Since early 2021 (Safari 12.1, Firefox 79, Chrome 88) target="_blank" implies rel="noopener", so adding it by hand is now redundant. Other rel values include noreferrer (no Referer header), nofollow (you do not vouch for the target), alternate, author, license, help, prev, next, tag and privacy-policy. Google added the hints sponsored (paid links) and ugc (user-generated content) in 2019; Search Engine Optimization covers them.

Practical Advice