The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.
<p>You can reach GRIMRIN at:</p>
<ul>
<li><a href="https://ablazelilith.com">www.ablazelilith.com</a></li>
<li><a href="mailto:kirialilith@gmail.com">kirialilith@gmail.com</a></li>
<li><a href="tel:+16098889889">(609) 888 9889 </a></li>
</ul>
You can reach LeliRรณsa at:
Attributes
download
Causes the browser to treat the linked URL as a download. Can be used with or without a filename value.
href
The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs โ they can use any URL scheme supported by browsers:
- Sections of a page with fragment URLs
- Pieces of media files with media fragments
- Telephone numbers with tel: URLs
- Email addresses with mailto: URLs
- While web browsers may not support other URL schemes, websites can with registerProtocolHandler()
hreflang
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
ping
A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.
rel
The relationship of the linked URL as space-separated link types.
target
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:
- _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 (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.
Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
type
Hints at the linked URL's format with a MIME type. No built-in functionality.
Content categories
Flow content, phrasing content, interactive content, palpable content
Permitted content
Transparent, except that no descendant may be interactive content or an a element, and no descendant may have a specified tabindex attribute.
Tag omission
None, both the starting and ending tag are mandatory
Permitted parents
Any element that accepts phrasing content, or any element that accepts flow content, but not other elements.
Examples
Linking to an absolute URL
<a href="https://www.ablazelilith.com"> Kiria </a>
Linking to relative URLs
<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
Linking to an element on the same page
<p><a href="#Section_further_down">Jump to the heading below</a></p>
<h2 id="Section_further_down">Section further down</h2>
Linking to an email address
To create links that open in the user's email program to let them send a new message, use the mailto: scheme:
<a href="mailto:hello@ablazelilith.com">Send email to Kiria</a>
For details about mailto: URLs, such as including a subject or body, see Email links.
Linking to telephone numbers
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
Security and privacy
<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.
Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks (vulnerability description), although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener".
Skip links
A skip link is a link placed as early as possible in
content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.
Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
<
body>
<a href="#content" class="skip-link">
Skip to main content
</a>
<header>…</header>
<main id="content"></main>
</
body>
.skip-link {
position: absolute;
top: -3em;
background: #fff;
}
.skip-link:focus {
top: 0;
}
Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
Size and proximity
Size
Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44ร44 CSS pixels is recommended.
Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.
Proximity
Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.
Spacing may be created using CSS properties like margin.
