Use of Mouse-Over Paragraph Marker in Headlines for Permalink

Question

I haven't really noticed this before, but it seems there's some fad where a headline on a web page would include a mouse over paragraph marker (¶) that links to a named anchor for the headline. If you didn't catch that, here's a picture from three completely unrelated sites that all do the same thing:

URLs for each above are as follows, respectively:

http://docs.mathjax.org/en/latest/#basic-usage

http://docs.python.org/2/tutorial/controlflow.html#the-range-function

http://ruby-doc.org/core-2.0/Array.html#label-Creating+Arrays

I'm sure there's many more sites out there doing this. These were just the first three I encountered.

So,

1. Why is everyone using this? For example, did all of these web developers come to the same conclusion that this would improve the user experience?

2. Where did this style originate from (specifically the paragraph marker hover over effect)?

---

UPDATE:

All the given answers seem to miss what I was asking, they are all talking about the concept "Permalink". What I was trying to ask is how the hover over the title paragraph symbol became synonymous with "Permalink"?

As I think more on this, I believe the answer may have something to do with all these web-sites sharing the same underlying engine which arbitrarily chose the paragraph symbol in their styling of the permalink.

Answer 1

Permalinks have their roots in blogs, forums and RSS feeds. Given some header'd content one can reference a permalink and be guaranteed that its link wont change. See Wikipedia on the subject. Additionally, using the paragraph symbol or "pilcrow" is a convention used by bloggers to link to older content - to indicate a permalinked bit of content. This is usefully for forming an RSS feed around content whose link won't change.

Answer 2

Here are my reasons to use it :

1. I can provide link to any one/ or save it for my future reference instead of searching it on lengthy(having large scroll bar) page. Ex :- If I want to re-visit Reference pages I will use perma link to it's headline, instead of scrolling and searching through whole web page.
2. To jump to a section I don't need to ask for another page from server(like links do) or I don't need to scroll down manually.

My Guess from where idea must have originated : From links like goto top on webpages.

Answer 3

It's quite good for reference/documentation sites to have structure followed with anchors usage. If there are multiple sections of the documentation on the same page, a programmer will find it easy to send a link to the specific part.

Anchors have one downside - they can be linked to, but to see their address you need to look into code or go to the link pointing at them and copy this link address.

To make it more convenient, reference/documentation sites, especially for programming, use something I would call "self link" (not sure if there is an official name for these). They are definitely useful for programmers, as I said. However, the examples you have mentioned have this feature hidden. It's not that bad, as such a site is usually often referred to by a programmer, so they have learned this behavior, but for newcomers these will be pretty much hidden completely. But again, newcomers rarely visit such sites.

PS. Of course it would be possible to put a small button to the right of each of each header, but some programmers disable JavaScript in their browsers (well, that's a part of their nature we're not gonna discuss) and copying to clipboard is usually done by JavaScript, so such a button wouldn't work at all in too many cases.

Answer 4

I suspect this behavior is a carryover from word processors. In their modern form, they are seen a lot due to underlying frameworks or libraries that generate the hover behavior.

Notable examples:

Mkdocs is used to make technical documentation. By default, it similarly has hover permalinks, but it uses a two-chain-links icon to represent the link; the same icon as in the stackexchange markdown editor for creating a link.

Redmine has issue tracking, wikis, etc. The wiki uses the paragraph hovers.

Word Processor with paragraph indicators Used when editing a document. Code editors sometimes do the same.

I feel that the hover is generally a bad ux for the following reasons:

• Only relatively sophisticated users know what an in-page anchor tag represents
• The icon changes from one site to another
• Touch devices have unspecified behavior
• Unpredictable as to how to select the right thing. Ex: here

The idea of having an id on an element that can be targeted by a link is great, but the hover behavior is weird.

Medium.com takes a related, but different approach, where you can highlight text within a document and then take an action on it (tweet, heart, etc). I feel that this would be a potentially better way, but more complicated to find the nearest id attribute to permalink to.