Have you ever wondered why you use an <a> element to add link to an HTML document? Paragraph is <p>, unordered list is <ul>, image is <img> but why <a> instead of <link>? Well, the reason is that the element both defines where to go to, but also an endpoint to link to, that’s why it is <a> for “anchor”. This goes back to ancient times of HTML, and whilst we don’t use it like this any longer, the echoes of the past still linger in our browsers, as document.anchors, document.links and String.link() and String.anchor().
Links, linked resources, in-page targets and anchors
OK, first of all, the <link> element exists, but instead of pointing to something on the web a user needs to interact with to go to, it describes a resource to load. The main use cases are loading style sheets, adding favicons and fonts, but there are many more ways to use it, including in-site navigation. But that’s for another article.
Now, the <a> element can have several roles, but one is almost forgotten. The most common one is pointing to another document and allowing the user to activate the link to go there.
<a href="https://wearedevelopers.com">WeAreDevelopers</a>
This also can take pseudo protocols, like mailto: and tel: to send emails or to make phone calls. You could also use javascript: but then you should leave frontend work to those who care. Links are meant to point somewhere, if all you want to do is execute JavaScript, use a <button>.
The other functionality of a link is to provide in-page navigation. Normally, if we link to a resource in a document, we just give it an id:
<a href="#othersection">Other section</a>
…
<h2 id="othersection">The other section</h2>
This also allows you to send people directly to there in the URL, like http://example.com#othersection. However, before browsers supported this, you needed to define an anchor using the <a> tag:
<a href="#othersection">Other section</a>
…
<h2><a name="othersection">The other section</a></h2>
This works the same. However, as a name is not a unique identifier, it always felt odd to do this. But back in the days, it was all we had. Let’s not forget that name is also used in form elements to define the name that gets submitted, in meta elements and to define groups of radio buttons or checkboxes.
Using CSS to differentiate between different types of <a>
Check out this codepen to see the following in action. In order to style the different types of anchors in the page You can use the attribute selector with a wildcard:
/* external links */
a[href^='http'] {
color: green;
}
/* internal links */
a[href^='#'] {
color: dodgerblue;
}
/* anchors */
a[name] {
color: saddlebrown;
}
Bonus tip: you can use the :target CSS pseudo selector to style the element that the user goes to either via a page internal link or a URL fragment.
*:target {
outline: 2px solid firebrick;
}
This puts a red outline on the section when the browser takes the user there. You could also use an animation to fade this out automatically after a while.
Ancient JavaScript link and anchor functionality
Even before we had access to a standardised DOM in JavaScript, a lot of the different HTML collections were available to us. In this case, you can check document.links for all the links in the current document and document.anchors for the anchors. Both of these are HTMLcollections much like document.tables or document.forms and you can access them directly using square brackets.
document.anchors
// -> HTMLCollection(2) [a, a, sanjose: a, uscfp: a]
document.links
// -> HTMLCollection(8) [a, a, a, a, a,
// a#berlintickets, a#berlincfp, a,
// berlintickets: a#berlintickets,
// berlincfp: a#berlincfp, uscfp: a]
document.anchors[0]
// -> <a name="sanjose">
// WeAreDevelopers World Congress North America
// </a>
document.links[5]
// -> <a id="berlintickets" href="https://www.wearedevelopers.com/world-congress/tickets">Berlin Tickets</a>
If you want to loop over them or read the length, you need to cast the collection into an Array. You can see this in the CodePen demo:
console.log('a tags: ',
[...document.querySelectorAll('a')].length,
' anchors: ',
[...document.anchors].length,
' links: ',
[...document.links].length
)
In addition to the collections there are two ancient String methods that turn text either into an anchor or a link.
'example'.link('http://example.com');
// -> <a href="http://example.com">example</a>
'example'.anchor('bottom');
// -> <a name="bottom">example</a>
There is probably no reason to use any of those any longer, but it might be important to know that these ghosts in the machine still exist in browsers, and especially the link methods might be an attack vector your filter hadn’t considered.