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 🤓