External links on my website now show a small icon commonly associated with an external link. The icon, which is part of each link and implemented using the CSS ::after pseudo-element, is a visual indicator that the linked material is on another website. This provides important context to the user that differentiates internal from external links within an article.
This has me thinking about other “link contexts”; cues that can be provided in or around a link that offer useful information to the reader. I have a few examples of this in mind:
- Iconography, which re-inforces the content of a link (i.e. a calendar icon next to a link that says
Choose a Dateor a magnifying glass icon next to the wordSearchthat, when clicked, takes you to a search page). - Styles applied using the
::visitedselector that change a link depending on whether it has been visited. For example, a link may appear in a lighter shade if it has been visited. This tells the user that they have already been to the linked destination. - Archive links, which link to an archived resource and may be indicated with
(archived), like “The joy of bookshops (archived)”. This may be used if the original source is not available, or if the context makes an archived link appropriate. - Red links, which link to a page on a wiki does not yet exist. Wikipedia says the following on red links: “Add red links to articles to indicate that a page will be created soon or that an article should be created for the topic because the subject is notable and verifiable. Red links help Wikipedia grow.”
- Actual anchor text that follows a link, like “The joy of bookshops (https://jamesg.blog/2024/11/28/joy-of-bookshops/)”, which may be used in a print stylesheet so that a URL is visible in print.
- Footnotes and references are used to link a citation to a statement in a text.
- The [citation needed] superscript, used on Wikipedia to indicate a claim requires a citation. While this doesn’t refer to a link specifically, the superscript links to a definition of the term “citation needed.”
- Caret icons (i.e. “▸”), which may be added to indicate that clicking on a link will open or close a list. The HTML details and summary tag has these by default.
- Dates that are provided after a link, like “The joy of bookshops (2024)”. I have seen this pattern used on news aggregator websites to indicate that a resource is older. This is relevant because news aggregator sites aim to show the more recent news, but a link from the past may still be relevant. Adding a date thus provides important context.
- Plain-text descriptions of the type of material on a link, like
[pdf]and. This may help a user make a decision about whether to click a link. For instance, a user may opt not to click a PDF or video link on a mobile device if they are on limited data. - Hashtags indicate a link is a tag, like
#design. - Numbers in parentheticals, which indicate the linked resource has a status, like
Inbox (3). - Hovercards, which show context about a link, often at least the resource title and a description or definition if relevant, when a link is hovered over.
What other kinds of “link contexts” are there?
See also: text-first-design on IndieWeb.org
Related: I have seen [Link 1] [Link 2] ... used in a few GitHub repositories to link to resources, like [Paper] [Announcement] [Video]. While this is more an example of marking up a list of links than it is an example of link context, the style is interesting.
