<a>
The <a> element creates hyperlinks to pages, files, locations in the same document, or protocol-based destinations such as email and phone links.
Overview
The <a> element creates hyperlinks to pages, files, locations in the same document, or protocol-based destinations such as email and phone links.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
href | 1 | 12 | 1 | 1 | 18 | 1 |
hreflang | 1 | 12 | 1 | 1 | 18 | 1 |
implicit_noopener `target="_blank"` implies `rel="noopener"` behavior | 88 | 88 | 79 | 12.1 | 88 | 12.2 |
| The rel attribute defines the relationship between a linked resource and the current document. Valid on link, a, area, and form, the supported values depend on the element on which the attribute is found. | 1 | 12 | 1 | 1 | 18 | 1 |
target | 1 | 12 | 1 | 1 | 18 | 1 |
type | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| The HTMLAnchorElement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular HTMLElement object interface that they inherit from) for manipulating the layout and presentation of such elements. This interface corresponds to element; not to be confused with , which is represented by HTMLLinkElement. | 1 | 12 | 1 | 1 | 18 | 1 |
| The hash property of the HTMLAnchorElement interface is a string containing a "#" followed by the fragment identifier of the element's href. If the URL does not have a fragment identifier, this property contains an empty string, "". | 1 | 12 | 1 | 1 | 18 | 1 |
| The host property of the HTMLAnchorElement interface is a string containing the host, which is the HTMLAnchorElement.hostname, and then, if the port of the URL is nonempty, a ":", followed by the HTMLAnchorElement.port of the URL. If the URL does not have a hostname, this property contains an empty string, "". | 1 | 12 | 1 | 1 | 18 | 1 |
| The hostname property of the HTMLAnchorElement interface is a string containing either the domain name or IP address of the element's href. If the URL does not have a hostname, this property contains an empty string, "". IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to IDN. | 1 | 12 | 1 | 1 | 18 | 1 |
| The href property of the HTMLAnchorElement interface is a stringifier that returns the absolute URL corresponding to the element's href attribute (or an empty string if href is unset). Setting this property updates the element's href attribute to the provided value. | 1 | 12 | 1 | 1 | 18 | 1 |
| The hreflang property of the HTMLAnchorElement interface is a string that is the language of the linked resource. | 1 | 12 | 1 | 1 | 18 | 1 |
| The origin read-only property of the HTMLAnchorElement interface returns a string containing the Unicode serialization of the origin of the element's href. | 8 | 17 | 26 | 5.1 | 18 | 5 |
| The password property of the HTMLAnchorElement interface is a string containing the password component of the element's href. If the URL does not have a password, this property contains an empty string, "". | 32 | 79 | 26 | 10 | 32 | 10 |
| The HTMLAnchorElement.pathname property is a string containing an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path). | 1 | 12 | 1 | 1 | 18 | 1 |
| The port property of the HTMLAnchorElement interface is a string containing the port number of the element's href. If the port is the default for the protocol (80 for ws: and http:, 443 for wss: and https:, and 21 for ftp:), this property contains an empty string, "". | 1 | 12 | 1 | 1 | 18 | 1 |
| The protocol property of the HTMLAnchorElement interface is a string containing the protocol or scheme of the element's href, including the final ":". | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLAnchorElement.rel property reflects the rel attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the a element and the current document. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only relList property of the HTMLAnchorElement returns a live DOMTokenList object containing the set of link types indicating the relationship between the resource represented by the a element and the current document. It reflects the a element's rel content attribute. | 65 | 18 | 30 | 9 | 65 | 9 |
| The search property of the HTMLAnchorElement interface is a search string, also called a query string, that is a string containing a "?" followed by the parameters of the element's href. If the URL does not have a search query, this property contains an empty string, "". | 1 | 12 | 1 | 1 | 18 | 1 |
| The target property of the HTMLAnchorElement interface is a string that indicates where to display the linked resource. | 1 | 12 | 1 | 1 | 18 | 1 |
| The text property of the HTMLAnchorElement represents the text inside the element. This property represents the same information as Node.textContent. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLAnchorElement.toString() stringifier method returns a string containing the whole URL. It is a read-only version of HTMLAnchorElement.href. | 52 | 12 | 22 | 3 | 52 | 1 |
| The type property of the HTMLAnchorElement interface is a string that indicates the MIME type of the linked resource. | 1 | 12 | 1 | 1 | 18 | 1 |
| The username property of the HTMLAnchorElement interface is a string containing the username component of the element's href. If the URL does not have a username, this property contains an empty string, "". | 32 | 79 | 26 | 10 | 32 | 10 |
| Other | ||||||
html.elements.a.href.href_sms `href = 'sms:'` | | | 12 | | | |
html.elements.a.href.href_top `href = '#top'` | 1 | 12 | 10 | ≤4 | 18 | ≤3.2 |
| The noopener keyword for the rel attribute of the a, area, and form elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null). | 49 | 79 | 52 | 10.1 | 49 | 10.3 |
| The noreferrer keyword for the rel attribute of the a, area, and form elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified. | 16 | 13 | 33 | 5 | 18 | 4.2 |
- Starting with Firefox 41, <a> without `href` attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
- From Firefox 29 to Firefox 40, the returned value was incorrectly percent-decoded.
- Before Firefox 49, results for URL using the `blob` scheme incorrectly returned `null`.
- Before Firefox 53, the `pathname` and `search` `HTMLHyperlinkElementUtils` properties returned the wrong parts of the URL. For example, for a URL of `https://z.com/x?a=true&b=false`, `pathname` would return `'/x?a=true&b=false'` and `search` would return '', rather than `'/x'` and `'?a=true&b=false'` respectively. This has now been fixed.
- Before Firefox 53, the `pathname` and `search` `HTMLHyperlinkElementUtils` properties returned the wrong parts of the URL. For example, for a URL of `https://z.com/x?a=true&b=false`, `pathname` would return `'/x?a=true&b=false'` and `search` would return '', rather than `'/x'` and `'?a=true&b=false'` respectively. This has now been fixed.
- Before Firefox 63, `rel="noopener"` created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
Syntax
<a href="https://example.com">External links</a>
<a href="/about/">Internal links</a>
<a href="#section1">Links within this page</a>
<a href="mailto:info@example.com">Email links</a>
<a href="/file.pdf" download>Download PDF</a>Live demo
Basic links
Href attribute in various linkdestination specified.pe-jinsidelink or Emaillink also possible.
Button-style links
link button. like to styling.color or size changeTry changing it.. with CSS
Use cases
Page navigation
Move users between documents, sections, and related resources with a familiar browser-native interaction.
Downloads and deep links
Link to files, mailto targets, telephone numbers, or anchored sections when the destination is a resource or location.
Cautions
- Links should navigate somewhere meaningful. If the behavior only changes the current UI state, a button is usually the correct element.
- Avoid vague link text such as 'Click here' when several links appear in the same context.
Accessibility
- Link text should describe the destination or outcome clearly, especially when announced out of context by screen readers.
- Keep focus styles visible and make the hit area large enough for touch and low-precision input.
Related links
Powered by web-features