<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.
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
199filename
value:-
200
- Without a value, the browser will suggest a filename/extension, generated from various sources:
201
-
202
- The
Content-Disposition
HTTP header
203 - The final segment in the URL path 204
- The media type (from the
Content-Type
header, the start of adata:
URL, orBlob.type
for ablob:
URL)
205
207 - The
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
210222Note:
211-
212
download
only works for same-origin URLs, or theblob:
anddata:
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 thedownload
attribute, resulting behavior may differ: 215-
216
- If the header specifies a
filename
, it takes priority over a filename specified in thedownload
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
220 - If the header specifies a
223 - Without a value, the browser will suggest a filename/extension, generated from various sources:
201
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
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
238lang
attribute.
239 ping
240 -
241
A space-separated list of URLs. When the link is followed, the browser will send
242POST
requests with the bodyPING
to the URLs. Typically for tracking.
243 referrerpolicy
244 -
245
How much of the referrer to send when following the link.
246-
247
no-referrer
: TheReferer
header will not be sent.
248 no-referrer-when-downgrade
: TheReferer
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
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
264<iframe>
). The following keywords have special meanings for where to load the URL:-
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
271273Note: Setting
272target="_blank"
on<a>
elements implicitly provides the samerel
behavior as settingrel="noopener"
which does not setwindow.opener
.
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.
284285287Note: This attribute is deprecated and should not be used by authors. Use the HTTP
286Content-Type
header on the linked URL.
288 coords
289 Deprecated 290
291 -
292
Used with the
293shape
attribute. A comma-separated list of coordinates.
294 name
295 Deprecated 296
297 -
298
Was required to define a possible target location in a page. In HTML 4.01,
299id
andname
could both be used on<a>
, as long as they had identical values.300302Note: Use the global attribute
301id
instead.
303 rev
304 Deprecated 305
306 -
307
Specified a reverse link; the opposite of the
308rel
attribute. Deprecated for being very confusing.
309 shape
310 Deprecated 311
312 -
313
The shape of the hyperlink's region in an image map.
314315317Note: Use the
316<area>
element for image maps instead.
318
Examples
Linking to an absolute URL
HTML
319<a href="https://www.mozilla.com"> Mozilla </a>
320
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
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
Result
338Note: 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.
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:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
342
Result
344For 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
Result
348tel:
link behavior varies with device capabilities:
-
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 asweb.skype.com
.
353 - Other behaviors include saving the number to contacts, or sending the number to another device. 354
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:
Example painting app with save link
357HTML
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
CSS
366html {
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
JavaScript
381const 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
Result
Security and privacy
<a>
elements can have consequences for users' security and privacy. See Referer
header: privacy and security concerns for information.
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
Strong link text
The content inside a link should indicate where the link goes, even out of context.
409Inaccessible, weak link text
410A 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
Result
414Strong link text
415Luckily, 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
Result
419Assistive 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 .
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.
Use a <button>
instead. In general, you should only use a hyperlink for navigation to a real URL.
External links and linking to non-HTML resources
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.
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.
423Link that opens a new tab/window
424<a target="_blank" href="https://www.wikipedia.org">
425 Wikipedia (opens in new tab)
426 </a>
427
Result
429Link to a non-HTML resource
430<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
431
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
Result
444Skip links
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.
<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
.skip-link {
460 position: absolute;
461 top: -3em;
462 background: #fff;
463 }
464 .skip-link:focus {
465 top: 0;
466 }
467
Result
469Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
470Skip 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.
471Size and proximity
Size
477Interactive 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.
478Text-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-
480
- Understanding Success Criterion 2.5.5: Target Size 481
- Target Size and 2.5.5 482
- Quick test: Large touch targets 483
Proximity
485Interactive 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.
486Spacing may be created using CSS properties like margin
.
Technical summary
Content categories | 493494 Flow content, 495 phrasing content, 496 interactive content, palpable content. 497 | 498
---|---|
Permitted content | 501502 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 | 507
Tag omission | 510None, both the starting and ending tag are mandatory. | 511
Permitted parents | 514
515 Any element that accepts
516 phrasing content, or any element that accepts
517 flow content, but not other <a> elements.
518 |
519
Implicit ARIA role | 522
523 link when href attribute is
524 present, otherwise
525 no corresponding role
526 |
527
Permitted ARIA roles | 530
531 When
When
|
549
DOM interface | 552HTMLAnchorElement |
553
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 inhref
attribute that was not yet visited by the user.
558 :visited
is a CSS pseudo-class that will match<a>
elements with URL inhref
attribute that was visited by the user in the past.
559 :any-link
is a CSS pseudo-class that will match<a>
elements withhref
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