HTML TUTORIALS

HTML Elements: <a>

Description

The <a> (anchor) element creates a hyperlink to another resource. Links can point to web pages, files, email addresses, telephone numbers, locations within the same page, or other resources identified by a URL. It is one of the most fundamental elements in HTML and is the primary way users navigate between pages on the web.

An anchor becomes an interactive hyperlink when the href attribute is provided. Without href, the element does not function as a standard link and is generally not keyboard focusable.

Basic Syntax
<a href="URL">Link text.</a>

Live Example(s)

Attributes

The <a> element supports all global attributes in addition to the element specific attributes described below.

download
Specifies that the linked resource should be downloaded instead of opened.
Value
Description
(empty)
Downloads the linked resource using its original filename.
filename
Suggests a filename for the downloaded file.
Example
<a href="guide.pdf" download="user-guide.pdf">Download PDF</a>
href
Specifies the destination of a hyperlink. Its value can reference a web page, file, email address, telephone number, location within the current page, or other supported URL schemes.
Value
Description
absolute_url
Links to a file using a complete URL.
relative_url
Links to a page or file relative to the current document.
root_relative_url
Links from the website root.
fragment_id
Links to an element with a matching id in the same document.
text_fragment
A text fragment links directly to specific text on a web page.
email_address
Opens the user's default email client.
tel_number
Opens the phone dialer on supported devices.
sms
Opens the messaging application on supported devices.
ftp_url
Links to an FTP resource (limited browser support).
js_url
Executes JavaScript when clicked (generally discouraged).
Examples
<a href="https://www.example-web.site/files/report.pdf">Absolute URL</a>
<a href="about.html">Relative URL</a>
hreflang
Specifies the language, and optional regional variant. The value uses a valid BCP 47 language tag. The hreflang attribute is advisory only and does not automatically translate content or change the browser's language.
Value
Description
lang_code
Specifies the language of the linked document.
lang_ctry_code
Specifies the language and regional variant.
Examples
<!-- English -->
<a href="about.html" hreflang="en">About Us</a>
<!-- English United States -->
<a href="about.html" hreflang="en-us">About Us</a>
interestfor
Identifies an '<a>' element as an interest invoker. Its value is the id of a target element that can respond when the user hovers, focuses, or long-presses the link. The target is typically a popover, though any element may be used. This is an experimental feature with limited browser support.
Value
Description
target_id
The id of the target element that responds when the user shows interest in the link.
Example
<p><a href="#" interestfor="info">More Information</a></p>
<div id="info" popover>Additional details appear here.</div>
ping
Specifies one or more URLs that are notified when a user follows a hyperlink. When the link is activated, the browser sends a POST request containing the body "ping" to each specified URL. This can be used to track link clicks or collect analytics.
Value
Description
url
Sends a notification to a single URL when the link is followed.
url url
Sends notifications to multiple space-separated URLs.
Examples
<!-- Single Ping URL -->
<a href="https://www.example-web.site" ping="https://tracker.example.com/ping">Visit Example</a>
<!-- Multiple Ping URLs -->
<a href="https://www.example-web.site" ping="https://tracker.example.com/ping https://analytics.example.com/click">Visit Example</a>
referrerpolicy
Specifies how much referrer information the browser sends when the user follows a hyperlink. It controls whether the destination receives the full URL, only the origin, or no referrer information at all.
Value
Description
no-referrer
Sends no referrer information.
no-referrer-when-downgrade
Sends the full referrer unless navigating from HTTPS to HTTP.
origin
Sends only the origin (scheme, host, and port).
origin-when-cross-origin
Sends the full URL for same-origin requests and only the origin for cross-origin requests.
same-origin
Sends the referrer only for same-origin requests.
strict-origin
Sends only the origin for equally secure requests and no referrer when navigating from HTTPS to HTTP.
strict-origin-when-cross-origin
Sends the full URL for same-origin requests, only the origin for cross-origin HTTPS requests, and no referrer when navigating from HTTPS to HTTP. (Default)
unsafe-url
Always sends the full URL, even to less secure destinations.
Example
<a href="https://www.example-web.site" referrerpolicy="strict-origin-when-cross-origin">Visit Example</a>
rel
Specifies the relationship between the current document and the linked resource. Its value consists of one or more space-separated link types that describe the purpose or behavior of the link.
Value
Description
alternate
Links to an alternate version of the document.
author
Links to information about the author.
bookmark
Indicates the link is a permanent URL for the nearest ancestor section.
external
Indicates the link points to an external site.
help
Links to a help document.
license
Links to licensing information.
me
Indicates that the current document represents the person who owns the linked content.
next
Links to the next document in a series.
nofollow
Advises search engines not to follow the link.
noopener
Prevents the opened page from accessing 'window.opener'. Recommended with 'target="_blank"''.
noreferrer
Prevents the browser from sending referrer information.
opener
Allows the opened page to access 'window.opener'.
prev
Links to the previous document in a series.
privacy-policy
Links to a privacy policy.
search
Links to a search page.
tag
Indicates the linked document is a tag for the current page.
terms-of-service
Links to terms of service.
ugc
Identifies user-generated content.
Example
<!-- Single Value -->
<a href="https://example-web.site" rel="terms-of-service">Terms of Services</a>
<!-- Multiple Values -->
<a href="https://example-web.site" rel="noopener noreferrer">Visit Example</a>
target
The target attribute specifies where to open the linked document or resource.
Value
Description
_self
The current browsing context. (Default)
_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 '_self'.
_top
The topmost browsing context. To be specific, this means the "highest" context that's an ancestor of the current one. If no ancestors, behaves as '_self'.
_unfencedTop
Opens the linked document in the top-level browsing context from within a fenced frame.
Example
<p><a href="#" interestfor="info">More Information</a></p>
<div id="info" popover>Additional details appear here.</div>
type
Specifies the MIME type (media type) of the linked resource. It provides a hint about the content type of the destination but does not affect how the browser follows the link. The 'type' attribute is optional and is most useful when linking to downloadable files or resources with a known media type.
Value
Description
text/html
HTML document.
text/plain
Plain text file.
text/css
CSS stylesheet.
text/javascript
JavaScript file.
application/pdf
PDF document.
application/json
JSON document.
application/xml
XML document.
image/jpeg
JPEG image.
image/png
PNG image.
image/svg+xml
SVG image.
audio/mpeg
MP3 audio.
video/mp4
MP4 video.
application/zip
ZIP archive.
Examples
<!-- application/pdf -->
<a href="guide.pdf" type="application/pdf">User Guide</a>
<!-- video/mp4 -->
<a href="movie.mp4" type="video/mp4">Watch Video</a>

Browser Compatibility

Always use the latest version of your browser. Using the latest browser version is crucial for security, performance (faster loading), and compatibility (properly displaying modern websites). Updated browsers protect personal data from hackers, improve speed, and fix bugs that cause crashes.

Widely Available Widely Available

Baseline Widely Available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

* Some parts of this feature may have varying levels of support.

See full compatibility   |  Learn more

CSS Default Values

Most browsers will display the <a> element with the following default values:

Related Elements

See Also:
HTML Element List
HTML Semantic Elements
HTML Attribute List
HTML Global Attributes

References:
caniuse.com
web.dev

Previous  Home  Next