'href' vs. 'src' in HTML

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, Vuild, 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"

Vuild replied that src is for a request while href is for a link to a resource.

One is a link (pointing to a resource), one is a requesting a source.

<a href="https://image.jpg"><img src="https://image.jpg" /></a> will embed (request src) & link to it. They are different things.

CSS is a src request.

I am doing both here:https://t.co/oq4TnIhLwL

— . (@vuildco) July 17, 2019

Being unable to grasp the difference, I replied that "CSS" is a request to download/parse/apply, it should be using src. As Vuild felt the same way, and he requested Brendan Eich, and Håkon Wium Lie for help.

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

src is on img too, it is for loading embedded; href is for hypertext ref, not loaded until user clicks on element

— BrendanEich (@BrendanEich) July 17, 2019

My “embedded” refers to auto inclusion vs click to load, not inline via out of line which is roughly orthogonal as you note.

— BrendanEich (@BrendanEich) July 17, 2019

(vs not via)

— BrendanEich (@BrendanEich) July 17, 2019

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".

CSS uses <link href...> because the HTML2 specification said so. I also find myself typing src. We could have saved one byte there! https://t.co/EGzCzgVALS

— Håkon Wium Lie (@wiumlie) July 17, 2019

"There we have it, HTML2 spec." (Vuild took words out of my mouth 😀).
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!

<a name=fig1 href="fghjkdfghj" REL="EMBED, PRESENT">Figure </a>

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

So, href was favored but <IMG SRC..> was implemented and convenient. It was a mistake for IMG to be empty, though -- it took years and years for <figure>...</figure> to finally fix this...

— Håkon Wium Lie (@wiumlie) July 17, 2019

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 Vuild, 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 😉).