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
  • I think this might help: ux.stackexchange.com/questions/19737/… Place the most important stuff first. As to whether to use hyphens, colons or pipes is a matter of personal preference. Commented Feb 11, 2016 at 9:42

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.