<a>: The Anchor element

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

194

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

Try it

Attributes

This element's attributes include the global attributes.

195
196
download
197
198

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

199
    200
  • Without a value, the browser will suggest a filename/extension, generated from various sources: 201 206
  • 207
  • filename: defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
  • 208
209
210

Note:

211
    212
  • download only works for same-origin URLs, or the blob: and data: schemes.
  • 213
  • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
  • 214
  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ: 215
      216
    • If the header specifies a filename, it takes priority over a filename specified in the download attribute.
    • 217
    • If the header specifies a disposition of inline, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
    • 218
    219
  • 220
221
222
223
href
224
225

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

226
    227
  • Sections of a page with document fragments
  • 228
  • Specific text portions with text fragments
  • 229
  • Pieces of media files with media fragments
  • 230
  • Telephone numbers with tel: URLs
  • 231
  • Email addresses with mailto: URLs
  • 232
  • While web browsers may not support other URL schemes, websites can with registerProtocolHandler()
  • 233
234
235
hreflang
236
237

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

238
239
ping
240
241

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

242
243
referrerpolicy
244
245

How much of the referrer to send when following the link.

246
    247
  • no-referrer: The Referer header will not be sent.
  • 248
  • no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • 249
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • 250
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • 251
  • same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • 252
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • 253
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • 254
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
  • 255
256
257
rel
258
259

The relationship of the linked URL as space-separated link types.

260
261
target
262
263

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:

264
    265
  • _self: the current browsing context. (Default)
  • 266
  • _blank: usually a new tab, but users can configure browsers to open a new window instead.
  • 267
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
  • 268
  • _top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.
  • 269
270
271

Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.

272
273
274
type
275
276

Hints at the linked URL's format with a MIME type. No built-in functionality.

277
278

Deprecated attributes

279
charset 280 Deprecated 281
282
283

Hinted at the character encoding of the linked URL.

284
285

Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

286
287
288
coords 289 Deprecated 290
291
292

Used with the shape attribute. A comma-separated list of coordinates.

293
294
name 295 Deprecated 296
297
298

Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values.

299
300

Note: Use the global attribute id instead.

301
302
303
rev 304 Deprecated 305
306
307

Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

308
309
shape 310 Deprecated 311
312
313

The shape of the hyperlink's region in an image map.

314
315

Note: Use the <area> element for image maps instead.

316
317
318

Examples

Linking to an absolute URL

HTML

319
<a href="https://www.mozilla.com"> Mozilla </a>
320 
321

Result

Linking to relative URLs

HTML

322
<a href="//example.com">Scheme-relative URL</a>
323 <a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
324 <a href="./p">Directory-relative URL</a>
325 
326
331

Result

Linking to an element on the same page

<!-- <a> element links to the section below -->
332 <p><a href="#Section_further_down"> Jump to the heading below </a></p>
333 
334 <!-- Heading to link to -->
335 <h2 id="Section_further_down">Section further down</h2>
336 
337

Result

338
339

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

340

Linking to an email address

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

341
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
342 
343

Result

344

For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

Linking to telephone numbers

<a href="tel:+49.157.0156">+49 157 0156</a>
345 <a href="tel:+1(800)555-0123">(800) 555-0123</a>
346 
347

Result

348

tel: link behavior varies with device capabilities:

349
    350
  • Cellular devices autodial the number.
  • 351
  • Most operating systems have programs that can make calls, like Skype or FaceTime.
  • 352
  • Websites can make phone calls with registerProtocolHandler, such as web.skype.com.
  • 353
  • Other behaviors include saving the number to contacts, or sending the number to another device.
  • 354
355

See RFC 3966 for syntax, additional features, and other details about the tel: URL scheme.

Using the download attribute to save a <canvas> as a PNG

To save a <canvas> element's contents as an image, you can create a link where the href is the canvas data as a data: URL created with JavaScript and the download attribute provides the file name for the downloaded PNG file:

356 357
HTML
358
<p>
359   Paint by holding down the mouse button and moving it.
360   <a href="" download="my_painting.png">Download my painting</a>
361 </p>
362 
363 <canvas width="300" height="300"></canvas>
364 
365
CSS
366
html {
367   font-family: sans-serif;
368 }
369 canvas {
370   background: #fff;
371   border: 1px dashed;
372 }
373 a {
374   display: inline-block;
375   background: #69c;
376   color: #fff;
377   padding: 5px 10px;
378 }
379 
380
JavaScript
381
const canvas = document.querySelector("canvas");
382 const c = canvas.getContext("2d");
383 c.fillStyle = "hotpink";
384 
385 function draw(x, y) {
386   if (isDrawing) {
387     c.beginPath();
388     c.arc(x, y, 10, 0, Math.PI * 2);
389     c.closePath();
390     c.fill();
391   }
392 }
393 
394 canvas.addEventListener("mousemove", (event) =>
395   draw(event.offsetX, event.offsetY)
396 );
397 canvas.addEventListener("mousedown", () => (isDrawing = true));
398 canvas.addEventListener("mouseup", () => (isDrawing = false));
399 
400 document
401   .querySelector("a")
402   .addEventListener(
403     "click",
404     (event) => (event.target.href = canvas.toDataURL())
405   );
406 
407
Result

Security and privacy

<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.

408

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks, although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

Accessibility

The content inside a link should indicate where the link goes, even out of context.

409 410

A sadly common mistake is to only link the words "click here" or "here":

411
<p>Learn more about our products <a href="/products">here</a>.</p>
412 
413
Result
414 415

Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

416
<p>Learn more <a href="/products">about our products</a>.</p>
417 
418
Result
419

Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.

onclick events

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

420

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

421

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

422

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

423 424
<a target="_blank" href="https://www.wikipedia.org">
425   Wikipedia (opens in new tab)
426 </a>
427 
428
Result
429 430
<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
431 
432

If an icon is used to signify link behavior, make sure it has an alt text:

433
<a target="_blank" href="https://www.wikipedia.org">
434   Wikipedia
435   <img alt="(opens in new tab)" src="newtab.svg" />
436 </a>
437 
438 <a href="2017-annual-report.ppt">
439   2017 Annual Report
440   <img alt="(PowerPoint file)" src="ppt-icon.svg" />
441 </a>
442 
443
Result
444

A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

450
<body>
451   <a href="#content" class="skip-link">Skip to main content</a>
452 
453   <header></header>
454 
455   <main id="content"></main>
456   <!-- The skip link jumps to here -->
457 </body>
458 
459
.skip-link {
460   position: absolute;
461   top: -3em;
462   background: #fff;
463 }
464 .skip-link:focus {
465   top: 0;
466 }
467 
468

Result

469

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

470

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

471

Size and proximity

Size

477

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

478

Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.

479 484

Proximity

485

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

486

Spacing may be created using CSS properties like margin.

487

Technical summary

490 491 492 493 498 499 500 501 507 508 509 510 511 512 513 514 519 520 521 522 527 528 529 530 549 550 551 552 553 554 555
Content categories 494 Flow content, 495 phrasing content, 496 interactive content, palpable content. 497
Permitted content 502 Transparent, except that no descendant may be 503 interactive content or an 504 a element, and no descendant may have a specified 505 tabindex attribute. 506
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parents 515 Any element that accepts 516 phrasing content, or any element that accepts 517 flow content, but not other <a> elements. 518
Implicit ARIA role 523 link when href attribute is 524 present, otherwise 525 no corresponding role 526
Permitted ARIA roles 531

When href attribute is present:

532 544

When href attribute is not present:

545
    546
  • any
  • 547
548
DOM interfaceHTMLAnchorElement

Specifications

Specification
HTML Standard
# the-a-element

Browser compatibility

BCD tables only load in the browser

See also

    556
  • <link> is similar to <a>, but for metadata hyperlinks that are invisible to users.
  • 557
  • :link is a CSS pseudo-class that will match <a> elements with URL in href attribute that was not yet visited by the user.
  • 558
  • :visited is a CSS pseudo-class that will match <a> elements with URL in href attribute that was visited by the user in the past.
  • 559
  • :any-link is a CSS pseudo-class that will match <a> elements with href attribute.
  • 560
  • Text fragments are user-agent instructions added to URLs that allow content authors to link to specific text on a page, without IDs being required.
  • 561