It’s safe to assume that anyone who’s used the web have seen them. They take users from one page to another either within the same application or to an external website. There were really hot when they were introduced back in 1966 by a team led by Douglas Engelbart.
In the early 1980s Ben Shneiderman, a computer scientist at the University of Maryland, with his graduate student Dan Ostroff were preparing a videodisk exhibit for a museum. It was then where they used a caption that had all the information and users could click on it to see the photo associated with it.
At first, this discovery was called
embedded menu but that term was quickly replaced by
hyperlink. Tim Berners-Lee cited Shneiderman’s hyperlink work in his spring 1989 manifesto for what would become the World Wide Web.
Back then, this feature was super hot and it still is. People use it without even thinking about it and it’s become a natural part of the web.
Let’s review what they do:
Turns out it’s not as straightforward as one might think. The simplest way to put a link on your site is to use a good old
<a> tag with a
URL which it points to in the
<a href="/elsewhere">A good link, YES ╰(*°▽°*)╯</a>
<a href="/elsewhere" onclick="goTo('elsewhere')">Okay ¯\_(ツ)_/¯</a>
But some people decide to remove the
href attribute. This is not a good idea because you now prevented crawlers to find out where this link goes to:
<a onclick="goTo('elsewhere')">Please don't ╯︿╰</a>
In other occasions, people use the
href attribute without a URL or with a pseudo URL:
This is even worse than the previous case as it just confuses the hell out of every crawler out there.
You might think it’s a good idea to use a button to navigate the user, but let me tell you, that’s not a good idea either. The rule of thumb is that if the purpose is to do something on the current page, it could be a button. But if it’s takes users to another page or to an external site, it should be a link.
<button onclick="goTo('elsewhere')">But why? <( _ _ )> </button>
<div onclick="goTo('elsewhere')">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>
This not only wrong for crawlers, but also messes up the screen readers and causes a lot of trouble for people with any vision impairment. So please just use a link with a proper URL.
You saw we ruled out the pseudo URLs like
A URL contains these elements:
yashints.dev. A host is a name that one or some computers respond to. Usually it points to an IP address.
#sign, is called a fragment identifier. By itself a fragment identifier is not a piece of content. It just points to a specific part in the content such as a header.
💡 Because fragments are not suppose to point to different content, crawlers ignore them altogether. This means for single page applications where they use fragment like routing, crawlers don’t follow them and that’s why people use techniques such as server side rendering or SSR to allow crawlers become aware of the page’s content.
To sum it all up:
hrefattribute on an anchor tag.
Hope you’ve enjoyed reading this and thanks for drooping by. Until next article, Ta.