HTML tags | a
Tags: html, tags, a
Published: 2021-11-17 07:36:35

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

Its most important attribute is the `href` attribute, which indicates the link's destination.

If the `href` attribute is present, pressing the enter key while focused on the `<a>` element will activate it.

### download
Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:

* Without a value, the browser will suggest a filename/extension, generated from various sources:
  * The `Content-Disposition` HTTP header
  * The final segment in the URL path
  * The media type (from the `Content-Type` header, the start of a `data:` URL or `Blob.type` for a `blob:` URL)
* 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.

`download` only works for same-origin URLs, or the `blob:` and `data:` schemes.

If the `Content-Disposition` header has different information from the `download` attribute, resulting behavior may differ:
* If the header specifies a filename, it takes priority over a filename specified in the `download` attribute.
* If the header specifies a disposition of `inline`, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline.

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

* Sections of a page with fragment URLs
* Pieces of media files with media fragments
* Telephone numbers with tel: URLs
* Email addresses with mailto: URLs
* While web browsers may not support other URL schemes, web sites can with `registerProtocolHandler()`

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

### ping
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.

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

* `no-referrer`: the `Referer` header will not be sent.
* `no-referrer-when-downgrade`: the `Referer` header will not be sent to origins without TLS (HTTPS).
* `origin`: the sent referrer will be limited to the origin of the referring page: its scheme, host and port.
* `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.
* `same-origin`: a referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
* `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).
* `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).
* `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.

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

### target
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:

* `_self` (default): the current browsing context.
* `_blank`: usually a new tab, but users can configure browsers to open a new window instead.
* `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`.
* `_top`: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as `_self`.

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

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

## CSS
By default, links will appear as follows in all browsers:

* An unvisited link is underlined and blue.
* A visited link is underlined and purple.
* An active link is underlined and red.

You can override these styles using CSS properties like `text-decoration` and `color`.

## Accessibility
The content inside a link **should indicate where the link goes**, even out of context. Avoid using expressions like "_click here_" or "_here_".

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.

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**.

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.

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

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. 

Skip links let keyboard users **bypass content repeated throughout multiple pages**, such as header navigation. They 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.

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.

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.

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. Spacing may be created using CSS properties like `margin`.

When href attribute is present the `<a>` element may have different ARIA roles: 

* `button`
* `checkbox`
* `menuitem`
* `menuitemcheckbox`
* `menuitemradio`
* `option`
* `radio`
* `switch`
* `tab`
* `treeitem`

When `href` attribute is not present, it may have any ARIA role.

## Notes
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](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier).

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>
```

The `tel:` link behavior varies with device capabilities:

* Cellular devices autodial the number.
* Most operating systems have programs that can make calls, like Skype or FaceTime.
* Websites can make phone calls with `registerProtocolHandler`, such as `web.skype.com`.
* Other behaviors include saving the number to contacts, or sending the number to another device.

## Security

`<a>` elements can have [consequences for users’ security and privacy](https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns).

Using `target="_blank"` without `rel="noreferrer"` and `rel="noopener"` makes the website vulnerable to `window.opener` API [exploitation attacks](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/), although note that, in newer browser versions setting `target="_blank"` implicitly provides the same protection as setting `rel="noopener"`.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) | [Support](https://caniuse.com/mdn-html_elements_a)