<a> Anchor Links
The link element — internal, external, mailto, tel, and download.
1All Kinds of Links
The <a> element creates hyperlinks. The href attribute holds the destination — a URL, an in-page anchor, an email, a phone number, or a download.
<a href="https://example.com">External</a>
<a href="/about">Internal</a>
<a href="#section-2">Jump to section</a>
<a href="mailto:hi@site.com">Email us</a>
<a href="tel:+15551234567">Call us</a>
<a href="/file.pdf" download>Download PDF</a>2Safe External Links
When opening links in a new tab with target="_blank", always add rel="noopener noreferrer" to prevent the new page from accessing window.opener.
<a
href="https://external.com"
target="_blank"
rel="noopener noreferrer"
>
Open in new tab
</a>3Put the element in context
An anchor with an href navigates to a destination. Link text should identify that destination in context, including when it is read outside the surrounding paragraph. For an in-page link, the target ID must exist and remain unique.
4Practice with a small page
Create a contents link that points to a later section ID and a link to another page. Test both with keyboard input. Replace vague labels such as “click here” with a concise destination description and check what happens when the destination is unavailable.
Finished reading?
Mark this topic as complete to track progress.