href vs. src

I've always been struggling to remember a lot of the HTML attributes for various tags, but probably the one I get most frequently wrong is <link src="styles.css" />. Or was is <link href="styles.css" />? 😉

When I saw this post on dev.to, I realised I never really thought about if there was a system or pattern behind it, explaining the usage of href vs src.

But it turns out there is at least some logic behind it.

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

To sum it up, both are references to resources, but the src attribute is used for resources that are automatically loaded, while the href attribute is used for resources that are dynamically loaded through a trigger, e.g. a user click in case of the anchor tag.

But, I know what you think. The link tag "statically" references a resource but uses the href attribute, so what's up with that? That's where the inconsistency comes in 😅

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

So, considering all I'm not sure how useful this little piece of knowledge will be, but it generally always helps me to understand the reasoning behind why certain things are the way they are 🤓