Why are hyperlinks underlined?

fri18aug2006—33w230d63%— 05h34m00s—0utc

The link is the first significant new form of punctuation to emerge in centuries..

Steven Johnson, Interface Culture AM, p110-1

Indeed it is, but then we might as well feel warranted to pose the seldom-asked question of why are hyperlinks underlined. Dull utilitarian answers aside, an intriguing yet plausible historical explanation (or rather, re-interpretation) herefollows.

I believe our answer traces back to the humble clothe button A, that immemorial “knoblike appendage WP used on wearing apparel either for ornament or for fastening,” forgotten (as much else) during the Middle Ages, dismissed as vanity by the Puritans, and traded to Native Americans by early settlers.

With society’s mechanization through the first and second Industrial Revolutions WP, there was dire need to create appropriate interfaces for the control of the suddenly ubiquitous machines and one of the simplest, most versatile methods invented came to be called “button” WP, owing to its creative resemblance to the former fashion accessory (both were usually round after all).

One subtle point, which shall prove of great importance later, must be remarked now: Owing to human factors WP, most control buttons are usually seen from a very specific angle. Words fail me to further describe it but perhaps some pictures can help to illustrate the matter: the keyboard on the ←left shows the usual, canonical perspective of buttons we’ve grown accustomed to since the late 18^th^ century, and any other perspective, say, the keyboard on the right→, feels immediately awkward.

But back to our story: When the turn came for society’s computerization, there was again dire need to come up with suitable interfaces for the novel symbolic devices. Abstruse command-line WP interactions followed at first, but thanks to Xerox PARC‘s WP bitmap revolution1 graphical interfaces WP were envisioned (and, eventually, accepted). The new art form required new metaphors2 and prompted a creativity explosion that continues to this day, but few metaphors proved more fertile or intuitive than the visual staple that became the “graphic button”. Beveled out, it’s “push affordance” 3 invites interaction (a click, a push, a press) like nothing else we’ve come up with since.


With the advent of the inter-network, you guessed it, that direst of needs — the interface — made itself felt again. We needed a way to link geographically and semantically far-flung documents EE together. So what if Ted Nelson WP himself, hypertext’s father, was thinking in our trusty ole friend, the button, when he came up with his gift to the world?

The hyperlink might just be the latest, abstract, stylized reincarnation of our centuries-old pal, the button.

1 “The word itself [bitmap] suggested an unlikely alliance of cartography and binary code, an explorer’s guide to the new frontier of information.” Steven Johnson, Interface Culture AM, p21

For insight into the bitmap revolution see M. Mitchell Waldrop’s The Dream Machine AM, p366-8, and the raster graphics pedia.

2 Among which the worst yet best-known is probably the so-called “desktop metaphor” WP.

3 See Larry L. Constantine, Lucy A. D. Lockwood, Instructive Interaction: Making Innovative Interfaces Self-Teaching, p8, and also the affordance pedia to understand how the term is used by interaction designers.

4 Notice how of all the buttons showcased only MacOs X‘s corner balls break that familiar perspective talked about in the 4^th^ paragraph (usually hinted at through internal shadowing). I finally understand why they felt so jarring when I first saw them: not only are they overcolored for their humble functions, they’re not buttons, they’re weirdly lighted marbles.

Follow me on Twitter!  |  Back to ELZR.com