Link Bundles (aka multi-linking)

Tim Bray recently ran into the problem of choosing between resources when linking information, and wondered if the best option was to not choose, and instead link to multiple things from a single resource.

Having recently been reading about the benefits of Unobtrusive JavaScript (also known under the Hijax moniker), I thought I would try and build a solution that degrades gracefully. My criteria for success were:

• Is usable and preferably looks good on browsers without JavaScript/CSS support;
• Semantically understandable; and
• Complies with HTML 4/XHTML standards.

My original thought was to use the XLink specification, as Tim Bray suggests, and use JavaScript to convert this into HTML markup. Unfortunately, this idea soon ran aground because support for namespaced attributes on pretty much all browsers I tested, including Firefox, was so non-existant as to make it a non-starter.

The next option was what seemed obvious: nested A tags. Unfortunately, this is specifically prohibited by both the HTML 4 and XHTML specs.

In the end, I reduced the markup requirements to a single enclosing span classed appropriately:

Multilink syntax

<span class="multiHref">
  <a href="http://www.google.com">Google</a>
  (<a href="http://finance.google.com/finance?q=GOOG">Stock Price</a> -
  <a href="http://news.google.com/news?q=google&scoring=d">Recent News</a>)
</span>

The rest is dealt with via Javascript. View an example here. Note that you'll need to use Firefox at the moment, there's still a kink in Internet Explorer that I haven't worked out.