Chapter 23 | The anchor element
In this chapter we start our look at the text-level semantic elements. This chapter is exclusively focused on the element that makes the web, the web. The anchor(
a - The anchor element
the anchor element is what allows us to link all the documents, websites, pages, and applications together. So simple and yet so powerful. The web would not be what it is without this element. Besides the global attributes, the anchor element has a couple of attributes that are of interest.
This is the attribute we use to specify where the user agent will navigate when the anchor element is activated. This should be a valid URL or fragment identifier in the current document. If the attribute is present the anchor represents a hyperlink labeled by its content, if not present, the anchor element represents a placeholder consisting only of its contents.
target attribute sets the browsing context to use when the hyperlink is activated. The value needs to be one of
NOTE: For a detailed list see the documentation.
Live Codepen - The
_parent do have their use cases, the most used of the browser contexts is the
_blank value. This will open the link in a new tab unless the user’s browser is configured to always open in a new window.
NOTE: When using the
_blankkeyword on an anchor element it is best practice to also specify
rel="noopener"for security reasons. See the original article by Mathias Bynens for the details.
NOTE: After a specification change most modern browsers now implicitly set
The download attribute instructs the browser to download the destination specified by the
href attribute instead of navigating to it. The
download attribute can be specified by itself, as a boolean attribute, or with a value. If a value is specified, it will be used as the filename(not file location i.e. slashes and back-slashes will be replaced by underscores) of the asset being downloaded.
NOTE: The download attribute only works for sources that are of the same origin.
Live Example - The
NOTE: The second download link above sets the filename to
ping attribute is rather interesting. It essentially exposes a mechanism that allows you to collect statistics about how users use your site by sending “pings” to a specified URL, or URLs. This is limited to interactions on an
This is the basic syntax:
With the above in place, clicking on the link will do three things:
- Send a ping to
- Send a ping to
- Fetch and load
Well, that is it on a basic level. Let’s dig a little deeper. If the
ping URL’s scheme is not an HTTP(S) scheme, the browser will do nothing. A user can also express a preference for pings to be disallowed in which case the user agent should do nothing.
NOTE: Currently all browsers that support the
pingattribute(essentially all but Internet Explorer) have pings enabled with seemingly no way to disable it. The odd one out is Firefox. In Firefox it is currently disabled by default and needs to be enabled via a specific flag.
If the above conditionals are all met, the user agent will make a new request with the URL, or the first URL in the list, using the HTTP POST method. If the URL of the document that contains the hyperlink and the URL of the
ping is of the same origin, the browser will proceed to fetch the resource specified by the
That is the basic “happy path”. There are two other conditions though. If the origins are different, and the scheme of the document containing the hyperlink is not
HTTPS, the request sent by the
PING must include a
Ping-To HTTP header.
Ping-From should contain the URL of the document that contains the hyperlink, and
Ping-To should contain the URL of the target URL.
Should a user access
http://www.myblog.com and click on the link, the
PING POST request should have
Ping-From: http://www.myblog.com and
Ping-To: http://www.myblog.com/how-to-use-ping-attribute.html set as HTTP headers on the request. Now, if the origins are different, but the scheme is
HTTPS, then the user agent should only set the
Ping-To header. Pretty intense stuff 🙃 😱
I created a small app you can use to play around with this here.
We have covered the
rel attribute extensively when discussing its use on the
link element so I will not go into too much depth here. Suffice it to say that the
rel attribute, when used on the anchor element, indicates the relationship between the current document and the target location.
As mentioned earlier, one use is to specify
noreferrer when using the
target attribute with a value of
_blank. Another common use case is to indicate that the target location is external to the current document, for example.
hreflang attribute, as its name suggests, is used to indicate the language of the target document.
type attribute on the anchor element can be used to provide a hint to the browser as to the type of resource the hyperlink points to. The value of the attribute should be a valid MIME type string.
NOTE: It is best practice to also specify the format if not another HTML document. It is also good to state size of the linked asset as shown above.
The above instructs the browser to not send along the
Referrer header when following the hyperlink.
NOTE: From the HTML specification documentation: “The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the
hrefattribute is not present.”
And that covers the anchor element. Wow! Who knew there was so much to this seemingly simple backbone of the internet? Well now, you, that’s who! 😁 I hope you found this interesting and insightful.