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.

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.

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

“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!

As you can see it’s more “convenient” to use img.src thus that’s what’s implemented.

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

The post “href” vs. “src” in HTML appeared first on Sung's Technical Blog.