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.
Vuild@vuildco@dance2die 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:
vuild.com/face00:33 AM - 17 Jul 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.
BrendanEich@brendaneich@dance2die @vuildco @wiumlie @brave src is on img too, it is for loading embedded; href is for hypertext ref, not loaded until user clicks on element02:28 AM - 17 Jul 2019
BrendanEich@brendaneich@dance2die @vuildco @wiumlie @brave My “embedded” refers to auto inclusion vs click to load, not inline via out of line which is roughly orthogonal as you note.02:52 AM - 17 Jul 2019
BrendanEich@brendaneich03:04 AM - 17 Jul 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”.
Håkon Wium Lie@wiumlie@vuildco @dance2die @BrendanEich @brave CSS uses <link href...> because the HTML2 specification said so. I also find myself typing src. We could have saved one byte there!
ietf.org/rfc/rfc1866.txt11:48 AM - 17 Jul 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
!
As you can see it’s more “convenient” to use img.src
thus that’s what’s implemented.
Håkon Wium Lie@wiumlie@vuildco @dance2die @BrendanEich @brave 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...12:19 PM - 17 Jul 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 😉).
The post “href” vs. “src” in HTML appeared first on Sung's Technical Blog.