<a name=fig1 href="fghjkdfghj" REL="EMBED, PRESENT">Figure </a>
where the relation ship values mean
EMBED Embed this here when presenting it
PRESENT Present this whenever the source document is presented
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.
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.
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.
— Vuild (@vuildco) July 17, 2019
<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
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".
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.
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>
where the relation ship values mean
EMBED Embed this here when presenting it
PRESENT Present this whenever the source document is presented
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. 😃
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.
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 😉).