Last night, I vented out my frustration on <link> requiring href to point to a CSS stylesheet instead of src.

I will share the help I received and the history provided by wonderful folks, Brendan Eich (creator of JavaScript), and Håkon Wium Lie (creator of CSS) on Twitter.

TL;DR

href resources are loaded based on a trigger while src resources are loaded automatically.
Not 100% accurate because CSS files get loaded automatically.
The confusion between href and src is due to a historical reason in early web standards era.

Difference between "href" & "src"

src is for a request while href is for a link to a resource.

Being unable to grasp the difference, I replied that "CSS" is a request to download/parse/apply, it should be using src.

Brendan Eich kindly replied that src is for "auto inclusion" while href'ed resources are loaded after an action occurs.

https://twitter.com/BrendanEich/status/1151317825908166656

https://twitter.com/BrendanEich/status/1151323779131305984

https://twitter.com/BrendanEich/status/1151326755749163008

But as for CSS, he agreed that href for CSS "seems(ed) inconsistent".

link href

Håkon Wium Lie kindly provided the history (how) and the rationale (why) behind it.

The rationale was because the "HTML2 specification said so".

https://twitter.com/wiumlie/status/1151458530567831553

Note that it's the HTML2 spec not XHTML2.

img src

And then Håkon followed up with how and why img uses src.

img.src was proposed by Marc Andreessen and Sir Tim Berners-Lee (inventor of World Wide Web) favored using an anchor tag with href!

https://gist.github.com/dance2die/7c9f90350985fbb2e2a2ba4405ce632f

As you can see it's more "convenient" to use img.src thus that's what's implemented.

https://twitter.com/wiumlie/status/1151466527759224833

There you have it. The convenience factor has won over. 😃

Additional History - HTTP Referer

After sharing the Twitter thread in useReactNYC (a React Meetup in NYC) slack workspace, Donavon (one of the useReactNYC hosts and an active React community educator who loves to {...💖}) has shared a link on how an HTTP header referer (note it's not spelled as "referrer", missing one "r") misspelling came about.

SPOILER: An old spell checker didn't catch it.

Parting Words

Many thanks to Brendan Eich, and Håkon Wium Lie for the help and the hi/story.

It was a great experience as they spared their time to teach and share the experience.

You can check out the original thread (but be warned, it has many branches and thus could be hard to follow 😉).