1

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.

Improve this question
1

2 Answers 2

Reset to default
3

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

Improve this answer
6
  • 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, 2016 at 15:03
  • @YvonneAburrow, You are correct, missed that out when copied the name of the page :) Thanks.
    – dimshik
    Feb 11, 2016 at 15:51
  • Just updated the question.
    – Mori
    Feb 11, 2016 at 15:56
  • @Mori I would use "CSS flexible: Flex item considerations"
    – dimshik
    Feb 11, 2016 at 16:00
  • 1
    You mean: page title: Bookmark that will be Using CSS flexible boxes: Flex item considerations. Right?
    – Mori
    Feb 11, 2016 at 16:17
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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