Introduction

Links (hyperlinks) are fundamental to the internet. They enable users to navigate from one webpage to another, connecting all resources online.

The <a> tag represents a hyperlink. It allows users to link to other pages, text, images, files, or even specific sections within the same page. In essence, any resource on the web can be accessed via an <a> tag.

Here’s an example of a typical link:

1
<a href="https://wikipedia.org/">Wikipedia</a>

In the code above, we define a hyperlink. The browser displays the text “Wikipedia” with an underline by default, indicating it’s a clickable link. When users click on it, the browser navigates to the URL specified in the href attribute.

The <a> tag can contain not only text but also other elements such as paragraphs, images, or multi-media.

For example:

1
2
3
<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg" alt="Example Image">
</a>

In this code, the <a> tag contains an image. Clicking on the image will navigate the user to the specified URL.

Attributes

The <a> tag has the following attributes:

href

The href attribute specifies the URL or anchor point that the link points to. It can be a full URL or an anchor. For example:

1
<a href="#demo">Example</a>

In this code, the href value is # followed by the anchor name. Clicking the link will scroll the browser to the demo anchor on the current page.

hreflang

The hreflang attribute indicates the language of the linked page. It is a hint for search engines and has no functional impact on the link itself.

1
<a href="https://www.example.com" hreflang="en">Example Website</a>

In this example, the hreflang attribute suggests that the linked page is in English. If a resource has versions in multiple languages, hreflang can be set to x-default to indicate the default version.

1
2
<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>

Here, hreflang="x-default" denotes that this link is the default version. The language codes used in hreflang are similar to those in the lang attribute, which can be referenced in the “Attributes” chapter of the documentation.

title

The title attribute provides additional information about a link. When a user hovers their mouse over the link, the browser displays the value of this attribute as a tooltip.

1
<a href="https://www.example.com/" title="hello">Example</a>

In the example above, hovering over the link will show a tooltip with the text “hello.”

target

The target attribute specifies how the linked document should be displayed. It determines whether the link opens in the same window, a new window, or within an <iframe>.

1
2
<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>

In the example above, both links open in a window named “test.” If the “test” window does not exist, the browser will create it and load the link. For instance, clicking the “foo” link opens foo.com in the “test” window. Clicking the “bar” link will then open bar.com in the same window, replacing the content of foo.com.

The target attribute can also use one of the following keywords:

  • _self: Opens in the same window (default).
  • _blank: Opens in a new window.
  • _parent: Opens in the parent frame. If there is no parent frame, it behaves like _self.
  • _top: Opens in the topmost window. If the current window is already the topmost window, it behaves like _self.
1
<a href="https://www.example.com" target="_blank">Example Link</a>

In this example, clicking the link will open example.com in a new window, which will have no specific name.

Note: When using the target attribute, it is advisable to use it in conjunction with rel="noreferrer" to mitigate security risks.

rel

The rel attribute describes the relationship between the linked resource and the current document.

1
<a href="help.html" rel="help">Help</a>

In the example above, the rel attribute indicates that the link is to a help document for the current page.

Common values for the rel attribute include:

  • alternate: An alternative version of the current document, such as a translation.
  • author: A link to the author of the document.
  • bookmark: A permanent address used as a bookmark.
  • external: A reference to an external document.
  • help: A link to help information.
  • license: A link to the license for the document.
  • next: The next document in a series.
  • nofollow: Instructs search engines to ignore the link, often used to prevent search engine manipulation.
  • noreferrer: Prevents the browser from sending the current URL as the Referer header when the link is clicked, thus hiding the source of the click.
  • noopener: Prevents the linked document from accessing the original window via JavaScript’s window.opener property, enhancing security.
  • prev: The previous document in a series.
  • search: A search link for the document.
  • tag: A link to tags related to the document.

referrerpolicy

The referrerpolicy attribute controls how the Referer header is handled when a link is clicked. It accepts the following values:

  • no-referrer: Never send the Referer header.
  • no-referrer-when-downgrade: Send the Referer header only if the destination is secure (HTTPS).
  • origin: Send only the origin (protocol + domain) as the Referer.
  • origin-when-cross-origin: Send the origin as the Referer for cross-origin requests.
  • unsafe-url: Always send the full URL as the Referer.
  • same-origin: Send the Referer header only for same-origin requests.
  • strict-origin: Send only the origin as the Referer for secure requests.
  • strict-origin-when-cross-origin: Send the origin as the Referer for secure cross-origin requests.

For detailed explanations of these values, refer to HTTP documentation.

ping

The ping attribute specifies a URL that will receive a POST request when the user clicks on the link. This is commonly used for tracking user behavior.

1
2
3
<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

In this example, clicking the link will not only navigate to http://localhost:3000/other but also send a POST request to http://localhost:3000/log. The server will then know that the link was clicked.

The request headers include ping-from (the page where the click occurred) and ping-to (the page pointed to by the href attribute):

1
2
3
4
5
6
headers: {
  'ping-from': 'http://localhost:3000/',
  'ping-to': 'http://localhost:3000/other',
  'content-type': 'text/ping'
  // ...other headers
}

Note that the ping attribute only works with links and is ineffective for other interactions like button clicks or form submissions. Additionally, Firefox does not support this attribute, and it cannot send custom data.

type

The type attribute specifies the MIME type of the linked URL, such as whether it’s a webpage, image, or file. This attribute is purely informational and does not affect functionality.

1
<a href="smile.jpg" type="image/jpeg">Example Image</a>

In this code, the type attribute indicates that the link points to an image file.

download

The download attribute specifies that a link is intended for downloading a file rather than navigating to another URL.

1
<a href="demo.txt" download>Download</a>

When you click the above link, a download dialog will appear.

Note that the download attribute only works if the link is to a resource on the same origin as the website. This means the link must be from the same domain as the page.

If a value is specified for the download attribute, that value will be used as the name of the downloaded file.

1
<a href="foo.exe" download="bar.exe">Click to download</a>

In the above code, the original file is named foo.exe. When clicked, the download dialog will prompt with the file name bar.exe.

Keep in mind that if the server’s HTTP response headers include a Content-Disposition field with a file name different from the download attribute, the Content-Disposition field will take precedence, and the download will use that file name.

Additionally, the download attribute can be used with data URLs (e.g., those starting with data:). In this case, the download attribute specifies the name of the file for download.

1
<a href="data:,Hello%2C%20World!">Click</a>

The link above opens a virtual page displaying “Hello, World!”.

1
<a href="data:,Hello%2C%20World!" download="hello.txt">Click</a>

When this link is clicked, it will download a file named hello.txt with the content “Hello, World!”.

Links can also point to an email address using the mailto protocol. When users click on such a link, their default email client will open, allowing them to send an email to the specified address.

1
<a href="mailto:contact@example.com">Contact Us</a>

In this example, the link directs to an email address. Clicking on it will open your email client with a new message addressed to contact@example.com.

The mailto protocol also supports additional email fields:

  • subject: Email subject
  • cc: Cc (carbon copy) recipients
  • bcc: Bcc (blind carbon copy) recipients
  • body: Email content

You can include these fields as query parameters appended to the email address:

1
<a href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body">Send Email</a>

In this code, the email link includes not only the recipient’s address but also cc, subject, and body fields. Note that values must be URL-encoded (e.g., spaces become %20).

It’s also possible to create an email link without specifying an address, allowing users to enter the recipient’s email address manually. This is often used for sharing a webpage via email:

1
<a href="mailto:">Tell a Friend</a>

For mobile users, you can use the tel protocol to create phone links. Clicking on such a link will prompt the phone to dial the specified number.

1
<a href="tel:13312345678">13312345678</a>

In this example, clicking the link on a mobile device will open the dialer with the number pre-filled, ready to make a call.

Link to original article:

https://wangdoc.com/html/a