Should tags be buttons or links?

Question

Are there any guidelines on how tags should ideally look like? Are they links, buttons, or visual "tags" with a link?

I personally find tags that mimic a physical tag or strip of tape appealing, but oftentimes tag listings also have the tags as buttons or simply as links. See the following examples:

• Illustration 1: Tags as buttons, as used on https://stackoverflow.com/

• Illustration 2: Tags as links, image from http://productblogarchive.37signals.com/products/2009/07/new-in-highrise-improved-tags-presentation.html

• Illustration 3: Tags mimicing a physical tag, button like, as used on http://delicious.com

Now I found a couple of questions on UX.SE about links and buttons, but none specific to tags. The best answer in the question button-vs-link states:

Rule of thumb: a link takes you to other place, a button makes something.

This would mean tags should be links rather than buttons, as they usually bring up a collection of items tagged with given word. Or is the visual metaphor of a button-like tag more important than the implicated action?

While I couldn't right away find an example of tags that look like buttons that have a link as label, I certainly can recall having seen those. Thus this question is also of interest, but not specific to tags, and would conclude to make the tags buttons.

One point that would advocate for more soft tag buttons is answered in this question about round buttons, but obviously the visual imitation of a physical tag takes this one step further.

Are links acceptable in tag collections or are tag buttons or even visual labels more advisable, and with what reasoning?

Answer 1

A tags primary use is to place content in context, which means they are labels first and foremost. In real life we use tags all the time to label things to its belongings. Take a suitcase on an airport, it has at least two tags; (1) The suitcase destination airport and (2) the suitcase owners home address. These tags place the suitcase in context of destination and owner address (used in the case where the suitcase is lost).

Labeling and tagging are carried out to perform functions such as aiding in classification, marking ownership, noting boundaries, and indicating online identity. Wikipedia - tag (metadata)

In digital content tags try to mimic that behavior and place the content in context. This means that tags are labels which you can style as either text links or buttons. If you style them as text links, you have the benifit of implementing visited/non-visited link feature. If you style them as buttons you have the option to make them stand out and be more important than text links. But you can also style them as linked labels looking like real life tags like delicious.com do.

Personally I think delicious.com has a very nice representation of the tag, but all three implementations are equally valid.

Answer 2

Button, because it looks more like a real-life tag than a link does. This is called a metaphor.

The rule of thumb you mentioned is wrong, of course buttons take you somewhere too, think about promotion buttons, form submit buttons, they all take you somewhere like links do. The only situation where links are better than buttons is when reading material is clickable, such as in-line text and headlines.

Answer 3

Tags, in terms of markup, should ideally be links because they usually redirect the user to the archives page of that tag.

However, in terms of visualization, it doesn't matter whether you display the tag as a link, a button, a block of text, or even a dancing elephant. What's important is it's obvious to the user that clicking on the tag will redirect them to the archive page of that tag. This will then depend on your site or application's look. Just be consistent across your site to avoid confusing your users. If the links on your site are underlined, then it might be better to at least underline the tags or use the same colors you employ with your hyperlinks even if you prettify the tags to look like the delicious.com buttons.