【linkタグ】HTML文書と別の外部リソースを関連付けしよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<link>タグの特徴
・タグのカテゴリ ―― 空要素。
・コンテンツモデル ―― メタデータコンテンツ。
・タグの省略 ―― 不可。（空要素のため開始タグは必要、終了タグはいらない）
・使用可能な親要素 ―― メタデータコンテンツを許容するすべての親要素。
（itemprop属性を使っている場合は、フレージングコンテンツを許容するすべての親要素になる）
・グローバル属性を持つ。
・ARIAロール ―― 標準でhref属性付きのlinkロールを持つ。
<link>の説明
<link>とは
このタグは、手元で記述しているHTML文書とは別に、外部リソースとリンクさせて関連付けをするためのタグです。
主に<link>タグは、メタデータコンテンツを記述する<head>要素内で使用することが多いタグです。
条件次第では<body>要素でも使用することができます。
場合「itemprop属性」を指定した場合か、「rel属性」のキーワードによっては<body>要素内に記述してもよいとなっています。
使い方が良いとは言えませんが例えば、rel属性でstylesheetを参照するケースにおいて、リンク種別がbody-okとなっていますから、body要素内でも使用することができます。
■使用目的
<link>要素には色々な使用用途がありますが、ほとんどの場合、外部ファイルとして記述して保存していた「CSSファイルを参照する」場合に使用することが多いタグです。
例えば一番使用頻度が高いであろうCSSファイルを参照するには、以下のような記述方法になります。
★まずrel属性の値に、リンクタイプを指定し文書間の関連付けを決めます。
<link rel="stylesheet">
★続いてhref属性の値に、ファイル場所や名前となる、URLまたは絶対パス・相対パスを指定します。
<link rel="stylesheet" href="ファイルの場所・ファイル名">
このようにCSSを参照する場合は、「rel属性の値に"stylesheet"」を、「href属性の値に"ファイル名"」を記述することで、外部ファイルに置いてあるCSSとリンクさせて読み込むことができるようになります。
※ <link>要素には、rel属性も、href属性も必須です！
■使用できる属性一覧
・as
・crossorigin
・anonymous
・use-credentials
・disabled
・href
・hreflang
・imagesize
・integrity
・media
・prefetch
・referrerpolicy
・rel
・sizes
・title
・methods
・taget
使用上の注意点
① <link>要素は、<head>要素内に記述する。
body要素内でも使えますが、メインコンテンツを記述する<body>と、メタデータコンテンツを記述する<head>の場所が混在することにもなりますから、分けて記述しておいた方がわかりやすいです。
② クリックができるリンクではなく、ブラウザには表示されることはない。
メタデータ、つまり情報のための情報を示すタグですので、<a>タグのようにテキストが青色で表示されたりクリックできるものではありません。
内容モデル
<link>要素の内容モデルは「nothing」です。
空要要素のため、内容を持つことはできません。
アクセシビリティでの注意点
<link>要素は、標準でARIAロールを持っていません。
ですが、itemprop属性を指定した場合には、「linkロール」を持ちます。
linkロールを持っていても、スクリーンリーダーなどでは特別な読み上げはされません。
読み上げはされませんが、スクリーンリーダーの拡大鏡でリンクが拡大されることがあります。
<link>の記述例
■rel属性とhref属性を使用した例
★HTML
このほかにも様々な使い方が存在しますが、これは代表的なCSSを外部ファイルから読み込むための記述例です。
まとめ
この記事では、<link>タグについての解説をいたしました。
特に多く使われているCSSファイルを読み込むときの方法で今回は紹介いたしましたが、title属性を指定した方法や、ファビコンを使用する方法など様々な使用用途があります。
ですが、通常のwebページ制作などでは、使う属性は限られてくると思いますので、まずは必要なrel属性とhref属性を使った方法を覚えておくとよいでしょう。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん✨
