How to use the link tag in HTML

After viewing a spirited discussion on Twitter focused on “developer-kids these days” not knowing how to use the <link> tag in HTML, and that subsequently making them “not belong in the craft", I thought I’d extend my tutelage to you poor souls.

While this is one of my first Medium posts, and I should probably be doing a deep dive into GraphQL, React patterns, performance, React Native animations or the Web Audio API, I can’t stand idly by while my brethren are being gatekept by this wildly complex HTML API, known formally as the External Resource Link Element.

So here goes.

You use the link tag to include stylesheets. You’ll likely only encounter the href, rel and media attributes.

So say you want to take on the monumental task of including a stylesheet into your HTML document. Just set rel=”stylesheet” and set href to your resource location.

<link rel=”stylesheet” href=”style.css”/>

Sure, there are many other attributes and possible attribute values, but in 15 years of doing this work, the above is what I’ve done 99.9% of the time.

If you are curious about the other things it can do, check out the full docs here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Welcome to the craft.