<a>
A link to another page, a file, an email address, or a place on the same page.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Transparent content, without interactive elements
Example
#<p>
Start with the <a href="https://www.codeworlds.com/courses">free HTML course</a>
or jump to the <a href="#attributes">list of attributes</a>.
</p>Definition and usage
#The <a> element (from anchor) creates a hyperlink. It’s what makes the web a web: you click text and it takes you to the address given in the href attribute.
A link can point to another page, to a specific place on the current page (href="#id"), to a file to download, to an email address (mailto:), or to a phone number (tel:). Without an href attribute, the element is just a placeholder: you can’t click it or tab to it.
A link’s content can be text, an image, or even a whole block with a heading and a description. You must not, however, nest other interactive elements inside it, such as a <button> or a second <a>.
Syntax
#<a href="address">link content</a>Attributes
#URL
The destination address. It can be absolute (https://…), relative (/courses), an anchor on the same page (#faq), or a special scheme, likemailto:ortel:._self | _blank | _parent | _top | name
Specifies where to open the address._self(the default) opens it in the current tab,_blankin a new tab or window. Modern browsers automatically cut the new page off from the page it came from when you use_blank.list of keywords
Describes the relationship between the current page and the target. You’ll most often seenoopenerandnoreferrer(security and privacy),nofollowandsponsored(for search engines, on untrusted or paid links), andexternal.file name (optional)
Tells the browser to download the file instead of opening it. The given value becomes the suggested file name. It only works for addresses on the same domain, and forblob:anddata:addresses.language code
Indicates what language the target page is in, for exampleenorpl. The browser doesn’t enforce this; it’s a hint for users and crawlers.MIME type
Hints at what kind of file is behind the address, for exampleapplication/pdf. Just likehreflang, it’s only a hint.no-referrer | origin | same-origin | strict-origin-when-cross-origin | …
Decides how much information about the source page the browser sends in theRefererheader after a click.no-referrersends nothing.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#href
URLThe destination address. It can be absolute (https://…), relative (/courses), an anchor on the same page (#faq), or a special scheme, like mailto: or tel:.
<a href="https://developer.mozilla.org">Full address</a><br>
<a href="/collections">Relative address</a><br>
<a href="#top">Anchor on this page</a><br>
<a href="mailto:team@codeworlds.com">Send an email</a><br>
<a href="tel:+1-212-555-0100">Call us</a>target
_self | _blank | _parent | _top | nameSpecifies where to open the address. _self (the default) opens it in the current tab, _blank in a new tab or window. Modern browsers automatically cut the new page off from the page it came from when you use _blank.
<a href="https://www.w3.org" target="_blank">Open W3C in a new tab</a>rel
list of keywordsDescribes the relationship between the current page and the target. You’ll most often see noopener and noreferrer (security and privacy), nofollow and sponsored (for search engines, on untrusted or paid links), and external.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
An external link that doesn't pass along the source address
</a>download
file name (optional)Tells the browser to download the file instead of opening it. The given value becomes the suggested file name. It only works for addresses on the same domain, and for blob: and data: addresses.
<a href="data:text/plain;charset=utf-8,Welcome%20to%20CodeWorlds" download="welcome.txt">
Download the file welcome.txt
</a>hreflang
language codeIndicates what language the target page is in, for example en or pl. The browser doesn’t enforce this; it’s a hint for users and crawlers.
<a href="https://www.codeworlds.com/en" hreflang="en">English version</a>type
MIME typeHints at what kind of file is behind the address, for example application/pdf. Just like hreflang, it’s only a hint.
<a href="/pricing.pdf" type="application/pdf">Pricing (PDF)</a>referrerpolicy
no-referrer | origin | same-origin | strict-origin-when-cross-origin | …Decides how much information about the source page the browser sends in the Referer header after a click. no-referrer sends nothing.
<a href="https://example.com" referrerpolicy="no-referrer">Without the Referer header</a>Default CSS
#Most browsers display this element with these default styles:
a:link, a:visited {
color: (browser-dependent);
text-decoration: underline;
cursor: pointer;
}
a:link:active, a:visited:active {
color: (browser-dependent);
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Link text should say where it leads. Instead of "click here," write "download the pricing PDF."
- A link is for navigation, a button for an action. If a click doesn’t open anything and just does something on the page, use
<button>. - For links that open in a new tab, it’s worth marking that in the text or with an icon, so you don’t catch the user off guard.
Related entries
#- <button> vs <a><button> performs an action on the page, e.g. submitting a form. <a> navigates: it changes the address or opens a resource. Both work with the keyboard.
- <nav>A block of primary navigation links: a menu, a table of contents, breadcrumbs.
- <button>A clickable button: submits a form, clears it, or runs an action on the page.
Spotted a mistake or missing an example? Write to us.