何気なく使っている link 要素。今こそあなた（link 要素）のこと知らなければならない！
ということで、
ついに、
link 要素と向き合うことにしました。
この記事を開いてしまった画面の前のあなた。
ぜひ
一緒に link 要素と向き合いましょう！
- link 要素の記述方法
- link 要素でよく使う属性と、その役割
目次
link 要素とは
link 要素は、HTML ドキュメントと他のリソース（例えば CSS やファビコンなど）を読み込むために使用します。特に、Web ページのデザインに関わる CSS を読み込むためにたくさん利用されます。
The link element allows authors to link their document to other resources.
W3C
本記事では、『link』させることを『読み込む』と表現して書いています。「ハイパーリンク」いわゆるリンクとの混乱を避けるため！
link 要素は
CSS を読み込むのに
よく使う
まずは、おさらい！
link 要素で、HTML ドキュメントと CSS ドキュメント（スタイルシート）を読み込む（リンクさせる）のによく使います。
必要最低限のコードはこんな感じ。
<link rel="stylesheet" href="〇〇.css">よく見慣れているかと思います！
私的に CSS を読み込むための link 要素の記述方法のオススメセットはこちら！
<link rel="stylesheet" href="〇〇.css" type="text/css" media="all">それぞれの属性の役割は次の項から説明していきます。
link 要素の基本は
rel 属性と href 属性を
入れる！
link 要素は主に head 要素内に記述します。基本的な形は次のようになります。
<link rel="〇〇" href="〇〇">rel 属性は読み込み先との関係が一致する「リンクタイプ」を指定し、href 属性でそのリソースのパスを指定します。このように HTML ドキュメントに追加することで、HTML ドキュメントとは別のスタイルシートが Web ページに適用されます。
『主に』head 要素内に記述すると書きましたが、実は rel 属性の属性値によっては body 要素に置くことも可能な場合があります。特殊なケースなので初心者のうちはそこまで気にしなくても良いと思います。ちなみに 「stylesheet」も body 要素内に置くことができるらしいです（あまり推奨されないようですが）。
rel 属性は読み込み先が“なんなのか”を示す
rel 属性は「relationship（関係）」の略だと考えられ、link 要素の繋ぎ先のリソースがどのような関係なのか、言い換えると読み込み先のリソースがいったい“なんなのか”を示します。そして属性値には「リンクタイプ」を入れます。
例としてはこんな感じです。
・スタイルシートを読み込む場合<link rel="stylesheet" href="〇〇.css">
・ファビコンを読み込む場合<link rel="icon" href="〇〇.ico">
もし属性値が間違っていたり、rel 属性自体が無いと、link 属性は正しく機能しない場合があります。「リンクタイプ」の一覧はW3Cで紹介されていますので、他の「リンクタイプ」が気になる方はチェックしてみてください。
href 属性で読み込み先を指定する
href 属性は、読み込みたいリソースのパスを指定します。
この属性は a 要素でも使うなじみ深い属性ですね！考え方は同じです。
読み込むことによって、
例えば、
読み込み先の CSS で、設定されたスタイルが、元の HTML ドキュメントに反映されます。
なので、
スタイルを記述したのに、うまく反映されない場合、href 属性の属性値のパスが間違っていたり、そもそも link 要素自体が記述されていなかったり間違っていたり、という初歩的なミスもしばしばあります。
その他の
よく使われる属性と
その使われ方
link 属性では、rel 属性とhref 属性以外にもよく使われる属性がいくつかあります。そのピックアップした例をいくつか紹介します。
type 属性
読み込むリソースの MIME タイプ（メディア種別）を指定します。CSS を読み込む場合は、type="text/css"と記述します。
この属性の半分は『やさしさ』で出来ています。
というのは冗談で、
この属性は“アドバイス”的存在な属性で、入っていると親切。入れなくても問題ない場合が多いです。習慣的に、形式的に、入れる感じで、それが良しとされているようです。
『なんとなく入れていた。』
『コードをコピペしたらついてたり、ついていなかったり……。』
そんな使い方してませんでしたか？？
今、
now、
この記事を見て、
type 属性について知ることができた人は、今度からはぜひ積極的に link 要素に type 属性を入れていきましょう！（または意図的に外していきましょう！）
他の MIME タイプについて知りたい方は参考リンクをチェックしてみてください！
media 属性
読み込み先のリソースを適用するメディアタイプ（画面、印刷など）や条件などを指定します。
例えば、印刷用のリソースであれば、media="print"
例えばスマホ用のリソースであれば、media="screen and (max-width: 390px)"
media 属性自体を記述していない場合は、media="all"
とみなされるようです。
sizes 属性
読み込むリソースのサイズを指定します。
こちらはほとんどの場合、rel="icon"またはrel="apple-touch-icon"の場合に使用する属性です。
記述例はこんな感じです。sizes="32x32"
title 属性
link 要素で使われる title 属性は、他の要素で使われる title 属性と違って特別な意味を持つ場合があります。それは「CSS スタイルシートセット」を定義する役割を持つことです。
「CSSスタイルシートセット」って何！？
『なんだそれ？』と思うかもしれません。
簡単にいうと、複数のスタイルシートをグループ化し、そのグループに名前を付けて管理する仕組みを指します。たとえば、ユーザーが“ダークモード”や“ライトモード”などのテーマを切り替えられるようにする仕組みと言えば、イメージしやすいでしょうか。
どうやって使うの？
具体的には、rel="stylesheet alternate"のような記述と組み合わせて、title 属性を決め、切り替え可能な「代替スタイルシート（alternate stylesheet）」を活用することで、テーマ切り替えを提供できます。
この機能を利用すると、1つのページで複数のデザインやレイアウトを簡単に提供することが可能になります。ただし、これらは少し応用的な内容なので、詳しい使い方はまた今度！
ざっくり、よく見かける、よく使う属性はこんな感じでしょうか。他にも、as 属性や、crossorigin 属性といった近年頭角を現してきた属性など、まだまだあるので、一度、W3C や MDN のページをぜひチェックしてみてください！！
まとめ
link 要素は、HTML ドキュメントとは別のリソースを読み込むための要素で、主に head 要素内に記述し、多くの場合は CSS や アイコン（ファビコン） を読み込むために使用されます。
CSS を読み込むためのコードのオススメの基本形は、
<link rel="stylesheet" href="〇〇.css" type="text/css" media="all">rel 属性と href 属性 は必須の要素で、type 属性と media 属性は省略しても機能しますが、入れておくとコードが読みやすく親切です！そのため習慣的に入れるのをオススメします！
link 要素は、何気なくコピペで使いまわしていて『意味が分からず使っている』という方も多いかと思いますので、これを機に正しく理解して、より意味のある、質の高い、ステキなコードを書けるようにしましょう！！
参考・出典
・W3C. 「4.2.4 The link element」. https://html.spec.whatwg.org/multipage/semantics.html#the-link-element, 2024年11月27日閲覧。
・MDN. 「<link>: 外部リソースへのリンク要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/link, 2024年11月27日閲覧。
・MDN. 「MIME タイプ（IANA メディア種別）」. https://developer.mozilla.org/ja/docs/Web/HTTP/MIME_types, 2024年11月28日閲覧。
・weblio. 「relationshipとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/relationship, 2024年11月27日閲覧。
