Modern Software Experience

2008-08-10

permalink standards

There are no official permalink standards.
I’ve argued, in Social Bookmarking Overload, that you do not need a bookmark ribbon with dozens of icons or text links to every possible social bookmarking site, but need just one permalink and one icon.
I’ve additionally argued, in Permalink Best Practice, that we should not clutter the page with an additional and poorly titled link, but use a permatitle instead; simply turn an article’s title into a permalink, for minimal mark-up overhead and nice a big, easy to find click target that requires no explanation.

In the first article, I made the argument that we do not need a bookmark ribbons at all, because readers already have some toolbar button they click for fast bookmarking. In the second article, I made the argument that it is not necessary to have a permalink at the end of post, because users who wants to bookmark something, should already have noted that the title is clickable, and hitting the Home key is easy enough.

If neither argument convinced you yet, perhaps a simple permalink convention will.

guiding reasons

There are two reasons for having a permalink convention.
One is that you should not need to support each and every social bookmarking service, or make a selection of services, but should be able to support all bookmarking services through some non-proprietary vendor-independent method.
The other reason is that, once a bookmarking service supports that method, your visitor should not have to scroll up or down or otherwise search for a permalink. Instead, their bookmarking add-on should auto-detect the permalinks, wherever they are on the page, and then provide a friendly interface for bookmarking those.

guidelines

Permalinks are such an significant concept, that future web specifications are likely contain some explicit support for it. Any approach should not just be compatible with current web standards, but preferably be easy to convert to those future standards.

Any method for marking permalinks should be simple in three important ways; It should be simple to do by hand for webmasters, simple to implement in web authoring tools and simple to support for a bookmarking add-on. It should work with any browser and any development tool. It should not require scripting, or additional tools.

Well, the simple permalink convention below is so simple, that if you know HTML already, you will be ready to update your pages as soon as you see it.

class="permalink"

That is it. It can hardly be simpler. Just add class="permalink" to a link to mark it as a permalink. It is not just simple, but self-explanatory as well. I could have suggested class="perm", class="plink", or class="pl" to save a few bytes, but that would not be as clear. The meaning of class="permalink" is pretty evident to anyone who knows what a permalink is, and those who do not yet know what a permalink is will find plenty of information when they google for it.

CSS

The class="permalink" convention is valid HTML and XHTML. Moreover, it is valid CSS. You can use this class to style permalinks differently from other links.
For example, you might to support marked permalinks in support of bookmarking add-ons, but really hate underlined titles and would rather put an icon in front of a title instead. CSS lets you do that. The links can look any way you want without impacting the convention.

bookmarkers

To support this simple permalink convention, all a bookmark add-in has to do is scan the page for links, collect those marked as permalinks, remove any duplicates, and then present those links to the user.

forwarding

This simple permalink convention works well with sites that use URL redirection or frame forwarding; the visitor can land on either the apparent or the actual page, the bookmark add-on will always pick up the link that the web site author specified as the permalink.

authoring tools

Adding class="permalink" to permalinks is such a small thing to do, that vendors of authoring tools are likely to add this little feature as part of a minor update. Blogging tools already know what the permalinks on your blog are, and should not even need any user input to link mark the right links, but may want to provide a visual indication and a manual override.

existing conventions

There is no official standard for marking up permalinks, but looking around, I did encounter a few other conventions.

# title

Surely the worst convention of all is titling the link with a single Number Sign character: "#". Links should not be titled that way.

rel="self"

The value used in this convention highlights the fact that many permalink link to the article they are part of. It is still a slightly confusing name, as they do not always link to the same page - we would not need permalinks if they did. It is not an official link type value either.

rel="bookmark"

Some blogs are using rel="bookmark" to denote a permalink. That seems semantically incorrect to me. Here is what the HTML 4.01 specification says about the "bookmark" link type:

Bookmark
Refers to a bookmark. A bookmark is a link to a key entry point within an extended document. The title attribute may be used, for example, to label the bookmark. Note that several bookmarks may be defined in each document.

It clearly states that rel="bookmark" should be used for a link to a key entry point within an extended document. Obviously, within the HTML standard, the use of the word bookmark should be understood as an HTML bookmark, an anchor within a document. An HTML bookmark and permalinks are two different concepts. The standard does not describe the "bookmark" link type as something to mark permalinks to a document with, but as something to mark links to anchors within documents with. That is not the same thing either. By the way, the phrase extended document sounds like something that might have some specific technical meaning, but no such meaning is defined; so in this context, extended simply means large.

The "bookmark" link type was created for HTML bookmarks, not permalinks. Usage of "bookmark" for permalink is abusage that conflicts with the semantics of the specification. If abusage of "bookmark" for permalinks becomes prevalent, the specification may have to deprecate its usage entirely and replace it with something else, say "anchor".
It seems more logical to mark blog entries with rel="chapter", perhaps rel="section" or rel="subsection", then to mark them with rel="bookmark", but admittedly, none of these seem ideal either. It is probably best to use none of these values.
We should be careful to apply semantic values correctly or not at all. Abusing a semantic value meant for one thing to mark something else does not help us move forward to a semantic web, but creates a semantic mess instead.

rel="permalink"

Another convention uses rel="permalink" to denote a permalink. That is quite obviously the semantically right thing to do. It states clearly what type of link it is, and does not confuse any tool by abusing another link type.

The only problem with this approach is that current web standards do not include "permalink" as one of the allowed link types. In fact, the absence of the "permalink" link type from the HTML spec, and perhaps it somewhat ambiguous name, is probably why some people decided to abuse "bookmark" in the first place. It allows their documents to be syntactically valid, but only by sacrificing valid semantics, while the rel attribute is about semantics...

The additional "permalink" value is an extension of the allowed link type values, just like Google’s rel="nofollow". Strictly speaking, both are invalid under current specifications. Practically, both work just fine. They both have a crystal clear meaning and do not create confusion by abusing some other link type value.

validation

A strict validator should reject the "permalink" value as illegal, but it is a minor infraction. This is not an home-brew tag or even an attribute, it is just an additional value for an existing attribute on existing tags.

semi-official

Many validators do not even notice. In fact, W3C’s own validator does not notice. I googled a random document using rel="permalink" and the W3C validator declared that This document was successfully checked as HTML 4.01 Strict!. This tiny bit of syntactic rebellion does get past the official gatekeeper, and that makes it semi-official already; it is not official, but the official check lets you get away with it.

Perhaps the validator will be upgraded to check link type values now that attention has been called to this apparent oversight, but even then most developer will shrug their shoulders and simply declare the validator to be overly picky, and the standard to be lagging behind the evolving web. Surely, "permalink" will be added as a link type on the next update of the spec.

XHTML

By the way, if you have upgraded from HTML to XHTML, you can have both rel="permalink" and validation. XHTML is the eXtensible HyperText Mark-up Language, you can extend it with any tag, attribute or attribute value you like.

best

Of those four methods, Using rel="permalink" is the superior convention, it just isn’t part of either the HTML or XHTML specification yet.

rel="permalink"

I currently prefer class="permalink" over rel="permalink" for four reasons.

  1. Although it is reasonable to expect that "permalink" will be added as a link type, it has not been added yet.
  2. It is possible to extend XHTML, but it is bothersome to do so, and you would probably find yourself tearing it down again once the "permalink" link type makes it into specification.
  3. The CSS class does double duty; it is not some random abuse of a CSS feature to mark permalinks, it really is a CSS class for permalink styling. CSS supports attribute selectors, so you could use a[rel="permalink"], but that only gets back to the issue that "permalink" is not a legal value for the rel attribute yet.
  4. It is easy to upgrade to rel="permalink" later. A simple search & replace will do the trick.

The a[rel="permalink"] syntax highlights yet another reason to not abuse the "bookmark" value; you may want to style bookmarks and permalinks differently.

Note that if you are careful to always put class="permalink" directly in front of any rel attributes, you can even replace class with rel and merge what would otherwise become two consecutive rel attributes with a single search & replace.

So, I am using class="permalink" for full compliance with current web standards, and expect to upgrade it to rel="permalink" once a new specification explicitly allows it.

Usage guidelines

You do not need to mark more than one link per article, and do not need not worry about have more than one permalink either. It is up to the bookmark add-on to not bother the user with duplicates.

On an article with links to other articles, the links to other articles should be permalinks, but only the link for the article itself should be marked as a permalink. Besides, any links to previous and next articles should be marked with class="prev" and class="next".

Be sure to use the article title as the link title when you use class="permalink". Your visitors will not like it when all the links their bookmarking add-on shows have titles such as "permalink" or "#". You must always use the full article title as the link title, to support the bookmarking add-in. You should be doing that anyway, for usability an accessibility, and to be help search engines make sense of your links.

Using class="permalink" to style permalinks is so straightforward, that you may be using it already. If so, do make sure you use it with real titles.

You can continue to use as many old-style permalinks as you want; if you do not mark them, automatic permalink detection will not collect them. You can even have it both ways; you can support the convention while maintaining your current look. To do so, do provide a full title, and then use CSS to hide that title from view and display the same text or icon as before.

Always place class="permalink" directly in front of any rel attributes, for easiest upgrade to rel="permalink" later.

For minimal mark-up overhead, combine this simple marking convention with the article title as permalink convention.

That’s all

The simple permalink convention is just a CSS styling class that does double duty as permalink marker. It is just a matter of using real titles and adding class="permalink" to the link. It is fully complaint with current web standards and is easy to upgrade to rel="permalink" later.

links