Sample code:

<!DOCTYPE html>
<html>
  <head>
    <title>Another Website Name</title>
  </head>
  <body>
    <h1>Fruits</h1>
      <h2>Apples</h2>
      <h2 id="target">Bananas</h2>
  </body>
</html>

What is the right text link to target the bookmark on another website? Is it enough:

<a href="http://www.example.com/fruits#target">Bananas</a>

Or should I mention the page title and website title as well? If so, should I use hyphens:

<a href="http://www.example.com/fruits#target">Bananas - Fruits - Another Website Name</a>

Or colons:

<a href="http://www.example.com/fruits#target">Another Website Name: Fruits: Bananas</a>

Or pipes? Or a combination of them? Is there a standard to follow? What is the best practice?

Update: It might clarify if I give a real example. Consider the following bookmark:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flex_item_considerations

I wonder what text link you would use for this example.

Always alert the user when opening new windows

As mentioned in rule 8 on this article:

Example 1: 15 rules making accessible links (opens in new window)

Or you can add an icon with an appropriate ALT attribute.

Example 2: 15 rules making accessible links

I think this can replace the "Another Website Name" in the text you suggested.

Also it's important to Keep link text concise as mentioned in Rule 5

  • I would upvote this if the link label said "15 rules of making accessible links" without the hyphens, which make it harder to read. – Yvonne Aburrow Feb 11 '16 at 15:03
  • @YvonneAburrow, You are correct, missed that out when copied the name of the page :) Thanks. – dimshik Feb 11 '16 at 15:51
  • Just updated the question. – Mori Feb 11 '16 at 15:56
  • @Mori I would use "CSS flexible: Flex item considerations" – dimshik Feb 11 '16 at 16:00
  • 1
    You mean: page title: Bookmark that will be Using CSS flexible boxes: Flex item considerations. Right? – Mori Feb 11 '16 at 16:17

If the other site & section you are linking to is a blogpost or a newspaper article, then the link should be something like Blog name: Post title (Author name).

As your link is in a list of links, I think I would mention the other website's name, as you may be linking to multiple different websites about bananas.

However, the most important information is what the linked-to page is about, so I'd be inclined to put the website name in brackets after the page name, e.g. Bananas (Wikipedia).

If the link opens in a new window, I prefer an icon open link in new window to indicate that, rather than bracketed text.

If the link is in the context of an article, then it should work as part of the sentence, e.g. "In an study of the dietary preferences of chimpanzees, bananas were found to be a favourite food source". Then use the title attribute to give a more detailed citation, e.g. "Wikipedia: Banana". Like this:

<a href="https://en.wikipedia.org/wiki/Banana" title="Wikipedia: Banana">bananas</a>

I realise there is a lot of "I prefer" in my answer, but I have never seen this issue mentioned in best practice guidelines on linking.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.