a: Exploring the Anchor Element

The <a> HTML element, also known as the anchor element, is a powerful tool for creating hyperlinks to web pages, files, email addresses, and even specific locations within the same page. By leveraging the href attribute, web developers can define the destination of the link, enabling users to navigate seamlessly through various resources.

When using the <a> element, it is crucial to ensure that the content enclosed within accurately reflects the intended destination of the link. Moreover, with the href attribute in place, users can easily activate the link by pressing the enter key when the <a> element is focused, enhancing accessibility and user engagement.

Try it

Here’s an example that demonstrates the usage of the <a> element:

<p>Contact John:</p>

<ul>
  <li><a href="https://www.example.com">Visit John's Website</a></li>
  <li><a href="mailto:[email protected]">Send John an Email</a></li>
  <li><a href="tel:+1234567890">Call John</a></li>
</ul>

In this example, the <a> elements are used to provide various contact options for John. The first <a> element creates a hyperlink to John’s website (https://www.example.com). The second <a> element uses the mailto: prefix followed by John’s email address, allowing users to send him an email when clicked. The third <a> element includes the tel: prefix followed by John’s phone number, enabling users to initiate a phone call to John.

Attributes

The <a> element supports various attributes, including the global attributes.

download: Specifies that the linked URL should be treated as a download. It can be used with or without a filename value. If no value is provided, the browser suggests a filename based on different sources, such as the Content-Disposition HTTP header, the URL path’s final segment, or the media type. When a filename value is defined, it suggests that filename for the downloaded file. Note that the download attribute works for same-origin URLs, as well as the blob: and data: schemes. The behavior of downloads can vary depending on the browser, user settings, and other factors.

href: Specifies the URL that the hyperlink points to. While HTTP-based URLs are commonly used, the <a> element can support various URL schemes, including document fragments, text fragments, media fragments, telephone numbers (using tel: URLs), and email addresses (using mailto: URLs). Websites can also register custom URL schemes using the registerProtocolHandler() method.

hreflang: Hints at the human language of the linked URL. This attribute does not have any built-in functionality and uses the same language values as the global lang attribute.

ping: Specifies a space-separated list of URLs. When the link is followed, the browser sends POST requests with the body “PING” to the specified URLs. This attribute is typically used for tracking purposes.

referrerpolicy: Determines how much referrer information is sent when following the link. Possible values include no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, and unsafe-url. These values control the sending of the Referer header in different scenarios, considering the security level and destination of the request.

rel: Specifies the relationship of the linked URL, using space-separated link types. The rel attribute provides additional context and semantic meaning to the link. Some common values include stylesheet, alternate, preconnect, nofollow, and noopener.

target: Specifies where to display the linked URL. The target can be a browsing context, such as a tab, window, or <iframe>. Common values for the target attribute are _self, _blank, _parent, and _top, which determine whether the link opens in the current context, a new tab or window, or a parent context. Note that setting target="_blank" implicitly provides the same behavior as setting rel="noopener", which prevents the opened window from accessing the original window.

type: Hints at the format of the linked URL using a MIME type. The type attribute provides information about the linked resource’s media type, but it doesn’t have any built-in functionality on its own.

These attributes expand the functionality and behavior of the <a> element, allowing developers to customize the behavior of hyperlinks and enhance the user experience.

Deprecated Attributes

Several attributes associated with the <a> element have been deprecated and are no longer recommended for use:

charset (Deprecated): Previously used to hint at the character encoding of the linked URL. However, this attribute is now deprecated and should not be used by authors. Instead, the character encoding should be specified using the HTTP Content-Type header on the linked URL.

coords (Deprecated): Formerly used in conjunction with the shape attribute to define a comma-separated list of coordinates. This attribute is deprecated and no longer recommended for use.

name (Deprecated): Previously required to define a possible target location within a page. In HTML 4.01, both the id and name attributes could be used on the <a> element with identical values. However, the name attribute is now deprecated. It is recommended to use the global id attribute instead to define unique identifiers for elements.

rev (Deprecated): Previously used to specify a reverse link, essentially acting as the opposite of the rel attribute. This attribute has been deprecated due to its potential for confusion and is no longer recommended for use.

shape (Deprecated): Formerly used to define the shape of the hyperlink’s region within an image map. However, this attribute is now deprecated. For image maps, it is recommended to use the <area> element instead, which provides more flexibility and control.

It is advisable to avoid using these deprecated attributes and instead adhere to modern HTML standards to ensure optimal compatibility, maintainability, and accessibility of your web pages.

Examples

Linking to an absolute URL:

<a href="https://www.projectsengine.com">Visit Projects Engine</a>

This example demonstrates a hyperlink that directs users to an absolute URL (https://www.projectsengine.com). When clicked, it will open the specified website in a new tab or window, depending on the user’s browser settings.

Linking to relative URLs:

<a href="about.html">About</a>
<a href="contact.html">Contact</a>

In this example, the hyperlinks are configured to navigate to relative URLs within the same website. When clicked, the “About” link will direct users to the “about.html” page, and the “Contact” link will navigate them to the “contact.html” page. Relative URLs are useful for linking to different pages or resources within the same website structure.

Note: Relative URLs can also include subdirectories or parent directories to navigate to specific paths within the website. For example, <a href="/p/s">S</a> would link to a “shoes.html” page located within the “products” directory.