How do you represent one-to-many links?

by Bob DuCharme

Let's say that, from a single point in this document, I want to refer you to several things at once. Modeling this one-to-many link and marking it up is simple enough with XML: you create a container element that holds other elements, each representing a link destination. But what do you do with that markup? How do you turn it into a choice of link destinations to offer to an end user?

One old-fashioned option is so simple that many won't even think of it as a one-to-many link: you add a layer of indirection by pointing to a single page that has the links you want. For example, "If you're interested in Unicode's role in XML, many good references are available."

The most obvious user-interface widget for a more direct one-to-many link is a pop-up menu. Implementing it on a web page pulls you into the classic platform/browser-app/browser-release quicksand quickly enough, but it's still fun to play with. I took a nice JavaScript library and used it to create a prototype of one-to-many linking from an XML document displayed in a browser, and that came out pretty nicely, depending on your platform/browser/release combination; I also explained the workings of the XSLT underneath in an column.

Some developers, though thankfully not too many, seek a compromise between these last two ideas by popping up a new browser window with a small document listing the link destinations, like in this reference the W3C Schema Recommendations. With the browser's navigation bar, menu, and other optional decorations removed, it looks a bit like a pop-up menu, but it's still a new browser window, and any new browser window on a screen should be there because the user asked for it, not because a developer wanted it there. In this paragraph's link I made the window small to look more like a pop-up menu, but if you follow one of its links, it puts the target resource in the same little window. You could tackle this using even more Javascript, but again... quicksand.

One nice, simple trick I've been seeing combines HTML with simple punctuation to group the link destinations: a parenthesized, delimited list of HTML a elements. For example, "Earlier this month, several new RDF Working Drafts (1, 2, 3, 4, 5, 6) were released." I've seen Jon Udell do this with commas as the delimiters, as I did here, and I've seen Slashdot use pipe symbols. Either way, despite its lack of whiz-bang UI flash (or, more likely, because of it), it works on every browser, and an XSLT transformation from any higher-level XML-based representation of one-to-many links into this format is simple. You could even add more sophisticated linking features to this interface by setting the numbers in different colors to show link types or by adding title attributes to the numbers' a links to show metadata in mouse-over popups, as I did with the RDF example.

Has anyone seen other variations on this use of delimited lists as one-to-many links? What's the earliest use you've seen of this?

Because linking has always been so important to the web, many people looked forward to the W3C's XLink specification because of its promise of delivering the next generation of linking. While it did show ways to model one-to-many links with extended links, it didn't show ways to implement them—in fact, it intentionally avoided this to keep the data structures it described high-level enough so that they could be implemented on a variety of platforms. The trouble was, practically no one implemented them, so people still wonder: how should they be implemented? You don't need advanced technology (as I've written here before, Frank Shepard was doing it in the nineteenth century, and Bibles were doing it long before that), but part of the fun of new technology is the new possibilities it opens up. It's only natural to wonder what new options new user interface developments will offer us for representing one-to-many links.

How have you seen one-to-many links implemented?


2003-09-27 16:05:12
Interesting post. One-to-many is a common scenario and implemented in a lot of ways. I personally like using anchors that point to the bottom of the page for related links. This minimizes clutter and is in tune with how one normally reads books. Of course, since there is usually a primary reference and the rest are related, it makes sense to use traditional HTML linking for the primary resource and have a footnote anchor after it pointing to the rest. Kinda like: Link[1]

Let's put some breaks so we can witness the anchor jump:

Related Links:

2003-09-27 20:53:19
I still like the skunkworks linking proposal I cooked up:

I tried to strike a balance between simple-enough single links and powerful multi-ended links.


2003-09-29 09:51:14
Perhaps I should have worded the second and third sentences of my posting differently, because I guess they don't get the point across. SkunkLink is a nice, simple model, with intuitive markup to go with it, but as a model plus markup, it doesn't say anything about what apps might do with the markup. ("When a link contains multiple arcs with the same prominence, the arcs in question are intended as alternatives for selection by the end user. As with the arc-type, implementations are free to interpret the prominence in any suitable manner.")

Can you suggest examples of suitable implementation interpretations?

As with XLink, it makes perfect sense to refrain from specifying presentation in the spec for the model and markup, but people are still going to wonder about how to implement it.

SkunkLink is what inspired my demo of nested "a" elements at Are there any other implementations?

2004-08-27 12:05:43
Another low-tech way...

Lately I've been seeing multi-word phrases turned into 1-to-many links by linking different words in a phrase to different places. For example,
see "mailer configuration" here and "a short answer" here.

I don't like it, because it doesn't look any different from a link with a single destination, and the only way to find out that it goes to multiple destinations is by noticing a gap in the underlining of the hyperlinked phrase (as in the first example here) or mousing over each individual word that appears to be a link (as in the second example, which uses CSS styling to get rid of the underlining in links on the page).

2004-11-06 19:20:50
Another low-tech way...
There a discuss about links at : a, post by soudown
2004-11-07 07:49:29
Another low-tech way...
I don't like to use CSS file. It it hard for me to study.
post by Ãâ·ÑµçÓ°
2004-12-21 06:45:44
cool act
Thank you I am learning of new things all day! And it is good to know of my RSS already work.

I think I need add button of RSS to make this thing clear.
But more work to do!


2005-01-13 17:37:24
2005-02-11 02:59:47
some resource
The Link: is great!
by --turui007.