HTML Link Attributes

The <a> element is more than just href. A handful of additional attributes let you control where a link opens, how the browser treats the connection for security and privacy, whether a click downloads a file instead of navigating, and what language or file type the destination is in. Understanding these attributes turns a plain hyperlink into a precisely-behaved piece of navigation, and using them correctly is essential for accessibility, security, and SEO.

Overview / How it works

Every <a> element is parsed by the browser into a DOM node of type HTMLAnchorElement. By default, an anchor with an href attribute is rendered as inline, focusable, underlined blue text (in most default browser stylesheets) and becomes a keyboard-tab stop. The attributes you add to that anchor don’t change what it looks like — styling is CSS’s job — they change its behavior: what happens on click, what metadata is sent to the browser and server, and what relationship the link declares to the current page.

Think of href as the only required piece of information (without it, the element is just inert text, not a real hyperlink, and won’t be keyboard-focusable). Every other attribute is optional and layers on extra behavior. Some attributes affect the browsing context (where the destination opens), some affect network/security behavior (what data is sent, what the browser is allowed to do with the response), and some are purely informational metadata that assistive technology or search engines can use.

It helps to group the attributes by what they control:

  • Destination: href
  • Where it opens: target
  • Security / privacy of the linked context: rel, referrerpolicy
  • Download behavior: download
  • Destination metadata: hreflang, type
  • Tracking (rarely used directly): ping

Syntax

<a href="destination"
   target="_blank"
   rel="noopener noreferrer"
   download="filename.ext"
   hreflang="es"
   type="application/pdf"
   referrerpolicy="no-referrer">
  Link text
</a>
Attribute Purpose
href The URL the link points to. Can be absolute (https://example.com), relative (/about), a fragment (#section), or a special scheme (mailto:, tel:).
target Which browsing context should open the link: _self (default, same tab), _blank (new tab/window), _parent, _top, or a named frame.
rel Space-separated list of relationship keywords describing the link, e.g. nofollow, noopener, noreferrer, external, author.
download Tells the browser to download the resource instead of navigating to it. The optional value suggests a filename.
hreflang The language of the linked document (e.g. fr, en-US). Informational only — doesn’t change browser behavior.
type A MIME type hint for the linked resource, e.g. application/pdf.
referrerpolicy Controls how much referrer information (the URL of the page containing the link) is sent when the link is followed.
ping A space-separated list of URLs the browser sends a lightweight POST notification to when the link is clicked (used for click tracking).

Examples

Example 1: Opening a link in a new tab safely

<p>
  Read the full spec on the
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
     target="_blank"
     rel="noopener noreferrer">
    MDN reference page
  </a>.
</p>

Result: A paragraph of text with an inline link reading "MDN reference page." Clicking it opens the MDN page in a brand-new browser tab, leaving the original page open in its own tab.

The target="_blank" attribute creates a new browsing context. The rel="noopener noreferrer" is not optional here in practice: without noopener, the newly opened page can access window.opener and, in some older browsers, could redirect the original tab to a malicious URL (a technique called "tabnabbing"). noreferrer additionally strips the Referer header entirely for extra privacy.

Example 2: Downloading a file instead of navigating

<a href="/files/course-syllabus.pdf" download="syllabus.pdf" type="application/pdf">
  Download the syllabus (PDF)
</a>

Result: A link labeled "Download the syllabus (PDF)." Instead of navigating the browser to the PDF, clicking it triggers the browser’s download flow and saves the file locally as syllabus.pdf.

The download attribute overrides normal navigation for same-origin (and same-scheme, permission-allowing) resources. Its value becomes the suggested filename; if you omit a value, the browser uses the resource’s original filename. The type attribute here is just a hint describing the resource’s MIME type — it doesn’t force the download, download does that.

Example 3: A fully annotated external, translated link

<nav>
  <ul>
    <li>
      <a href="https://es.example.com/manual"
         hreflang="es"
         rel="external nofollow"
         referrerpolicy="strict-origin-when-cross-origin">
        Manual en Español
      </a>
    </li>
    <li>
      <a href="mailto:support@example.com?subject=Help">Email support</a>
    </li>
    <li>
      <a href="tel:+15551234567">Call us</a>
    </li>
  </ul>
</nav>

Result: A navigation list with three links: one to a Spanish-language manual, one that opens the user’s default email client with a pre-filled subject line, and one that opens the device’s phone dialer.

hreflang="es" tells search engines and screen readers the linked page is in Spanish (it does not translate anything itself). rel="external nofollow" marks the link as leaving the site and tells search engine crawlers not to pass ranking credit through it. The mailto: and tel: schemes are handled by the operating system rather than by normal page navigation.

How it works step by step

  1. The HTML parser encounters <a> and creates an HTMLAnchorElement node in the DOM, reading each attribute into the corresponding IDL property (e.g. the href attribute populates both a string property and a parsed URL-like interface with .protocol, .hostname, etc.).
  2. By default the browser’s user-agent stylesheet renders the element as display: inline with link coloring and an underline, and adds it to the tab order because it has an href.
  3. On activation (click or Enter/Space while focused), the browser checks download first — if present and allowed, it initiates a download instead of navigation.
  4. Otherwise, the browser resolves target to decide which browsing context receives the navigation (current tab, new tab, a named frame, etc.).
  5. Before sending the request, the browser applies the effective referrer policy (from referrerpolicy, or a page-wide <meta> policy, or the default) to decide what Referer header, if any, to send.
  6. If rel contains noopener, the new browsing context is created without a reference back to the opening window’s window object, closing off the tabnabbing vector.
  7. Crawlers and other tools read rel values like nofollow/sponsored/ugc to decide how to treat the link for ranking purposes; these have no effect on rendering.

Common Mistakes

Mistake 1: Using target="_blank" without rel="noopener"

<a href="https://external-site.example" target="_blank">Visit partner site</a>

This works, but it’s a security anti-pattern: the opened page can access window.opener and potentially manipulate the original tab. Always pair target="_blank" with rel="noopener" (add noreferrer too if you also want to suppress the referrer):

<a href="https://external-site.example" target="_blank" rel="noopener noreferrer">Visit partner site</a>

Mistake 2: Expecting download to work cross-origin without restrictions

<a href="https://othersite.example/report.pdf" download>Get report</a>

Browsers largely ignore the download attribute for cross-origin URLs (unless the server opts in with the right headers), because otherwise any site could force downloads from any other origin. If the file lives on another domain, the link will typically just navigate to or preview it. Host the file on your own origin, or provide a same-origin proxy, if you need reliable forced downloads:

<a href="/downloads/report.pdf" download="report.pdf">Get report</a>

Mistake 3: Writing an anchor with no href at all

<a rel="noopener">Learn more</a>

This is technically valid HTML, but without href the element is not a real hyperlink — it’s not keyboard-focusable and gets no default link styling or navigation behavior. If you need a clickable, non-navigating control, use a <button> instead; if it should navigate, give it a real href:

<a href="/learn-more" rel="noopener">Learn more</a>

Best Practices

  • Always pair target="_blank" with rel="noopener" (add noreferrer when you also want to hide the referring URL).
  • Avoid opening new tabs unless the user genuinely benefits from keeping the original page — unexpected new tabs are a common usability and accessibility complaint.
  • Use rel="nofollow", rel="sponsored", or rel="ugc" to accurately label links you don’t editorially vouch for (ads, paid placements, user-submitted content), per search engine guidance.
  • Only rely on download for same-origin files, and give it a meaningful filename value so the saved file is easy to identify.
  • Add hreflang when linking to a translated version of a page — it helps assistive technology announce a language switch and helps search engines serve the right version to the right users.
  • Don’t use referrerpolicy="no-referrer" everywhere by default; some analytics and anti-fraud systems on the destination site rely on the referrer. Reserve it for cases where privacy genuinely matters.
  • Never remove the underline or link color via inline styling as a substitute for real button styling — that’s a CSS concern, and doing it thoughtlessly hurts link recognizability.

Practice Exercises

  • Write a link to https://example.com/whitepaper.pdf that opens in a new tab, is safe against tabnabbing, and is marked as an external link for search engines.
  • Write a link that lets a visitor download a file named invoice.pdf from your own site’s /billing/ folder, using a suggested filename of my-invoice.pdf.
  • Write a link to a German-language version of a page at /de/products, correctly marked with the language it points to, and explain in one sentence what would happen if you forgot the hreflang attribute.

Summary

  • href is the only required attribute; without it, an <a> isn’t a real, focusable hyperlink.
  • target controls which browsing context a link opens in; _blank opens a new tab.
  • Always combine target="_blank" with rel="noopener" (and often noreferrer) to prevent the opened page from accessing the original window.
  • download forces a save-to-disk flow instead of navigation, but is generally restricted to same-origin resources.
  • hreflang and type are metadata hints for language and MIME type — they describe the destination but don’t alter rendering.
  • referrerpolicy controls how much of the current page’s URL is disclosed to the destination server.
  • rel keywords like nofollow, sponsored, and ugc communicate the nature of a link to search engines without affecting how it looks or behaves for users.