From the beginning I have liked the icons used to indicate whether a link points to another location on the same page or to another page. Soon however I started to miss an easy way to see the difference between links directing to a page on the same site or to one on another site. That is why I produced my own set of three link‑icons: an in‑page icon, an exit‑page icon and an exit‑site icon. Later I added a to‑sister‑site icon.
The reason that the in-page and the exit-page icons have become as widely used as they are seems clear enough. It is very useful to know whether or not, by clicking on a link, the page I am reading will disappear and that I will have to wait for the new page to load before I can continue reading.
The reason I feel the need for icons differentiating between on‑site and off‑site links is that for me it is rather important to know if the suggested page is produced by the same or by a different person or organisation. It influences my decision on if and when I want to have a look at a certain page. This seemed so obvious to me that I expected someone to have the same idea and come up with a set of these three icons. Not having seen or heard of any until mid 2021, I produced my own set with an in-page, an exit-page (same site) and an exit-site icon in the beginning of June.
The argument of wanting to know if a linked to page is produced by the same person or not actually asks for a fourth icon, one indicating links to sister sites. The term sister sites is used to refer to sites that belong to the same person or organisation and are about related subjects. A first to-sister-site icon I made in the end of June 2021. which differed from the exit-site icon only in colour. Because it was different from the exit-site icon only in colour I wanted another one. The resulting present to-sister-site icon was ready a year later (June 2022).
In the table below an overview of the four link-icons with examples of html code and how they look on a web page.
icon | name |
example link
example code
|
---|---|---|
in page |
Top, introduction
<a title="in-page link" href="#intro">Top, introduction ;<img class="link-img" alt="icon in-page link" src="icons/in-page.png"></a>
|
|
exit page |
Family tree
<a title="exit page same site" href="https://www.held.com.br/resources/StamBoom-Eng.html">Family tree ;<img class="link-img" alt="icon exit-page link" src="icons/exit-page.png"></a>
|
|
exit site |
Impuls en Woortblind
<a title="exit-site link" href="https://www.impulsenwoortblind.nl/">Impuls en Woortblind ;<img class="link-img" alt="icon exit-site link" src="icons/exit-site.png"></a>
|
|
to sister site |
Email Encrypter
<a title="to-sister-site link" href="https://tonvanhattum.com.br/email_encrypter.php">Email Encrypter ;<img class="link-img" alt="icon to-sister-site" src="icons/to-sister-site-2.png"></a>
|