Skip to content
html.sh

<a> - The Anchor Element

The <a> Element

Section titled “The <a> Element”
Inline HTML 1.0

The anchor element creates a hyperlink to web pages, files, email addresses, phone numbers, or locations within the same page.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<a href="url">Link text</a>

The href attribute specifies where the link goes. The content between the tags becomes the clickable link text.

Attributes

Section titled “Attributes”

Core Attributes

Section titled “Core Attributes”
AttributeDescriptionValues
hrefURL the link points toURL, #id, mailto:, tel:
targetWhere to open the link_self, _blank, _parent, _top
relRelationship to linked pagenoopener, noreferrer, nofollow, etc.
downloadDownload instead of navigatingOptional filename

Less Common Attributes

Section titled “Less Common Attributes”
AttributeDescriptionValues
hreflangLanguage of linked resourceLanguage code (e.g., en, es)
typeMIME type of linked resourceMIME type
pingURLs to ping when clickedSpace-separated URLs
referrerpolicyReferrer information to sendno-referrer, origin, etc.

Common Use Cases

Section titled “Common Use Cases”
Section titled “Basic Link”
Result

Open in New Tab

Section titled “Open in New Tab”

Use target="_blank" with security attributes:

Result

Link to Page Section

Section titled “Link to Page Section”

Link to an element with a specific id:

Result
Section titled “Email Link”
Result
Section titled “Phone Link”
Result
Section titled “Download Link”
Result
Section titled “Image as Link”
Result

Accessibility

Section titled “Accessibility”

Use Descriptive Link Text

Section titled “Use Descriptive Link Text”
<a href="/pricing">View pricing plans</a>
<a href="/docs">Read the documentation</a>

Screen reader users often navigate by links alone, so “click here” out of context is meaningless.

Section titled “Indicate External Links”

Let users know when links open new windows:

<a href="https://external.com" target="_blank" rel="noopener">
  External Site (opens in new tab)
</a>

Don’t Remove Focus Styles

Section titled “Don’t Remove Focus Styles”

Users navigating by keyboard need to see which link is focused. Style focus states, don’t remove them:

a:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

Browser Support

Section titled “Browser Support”
BrowserVersionNotes
Chrome1+Full support
Firefox1+Full support
Safari1+Full support
Edge12+Full support
IE3+Full support

The <a> element has been supported since the earliest browsers.

Section titled “Related Elements”

Specifications

Section titled “Specifications”