<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.
href attribute is present, pressing the enter key while focused on the
<a> element will activate it.
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 final segment in the URL path
- The media type (from the
Content-Typeheader, the start of a
- Defining a value suggests it as the filename.
</code> 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
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
- 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.
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
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global
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.
How much of the referrer to send when following the link.
Refererheader will not be sent.
Refererheader 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.
The relationship of the linked URL as space-separated link types.
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
_top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as
<a> elements implicitly provides the same
rel behavior as setting
rel="noopener" which does not set
Hints at the linked URL’s format with a MIME type. No built-in functionality.
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
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
<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
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
When href attribute is present the
<a> element may have different ARIA roles:
href attribute is not present, it may have any ARIA role.
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.
To create links that open in the user's email program to let them send a new message, use the
<a href="mailto:firstname.lastname@example.org">Send email to nowhere</a>
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
- Other behaviors include saving the number to contacts, or sending the number to another device.
<a> elements can have consequences for users’ security and privacy.
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
- Type: inline
- Self-closing: No
- Semantic value: No