「リンク」に関連するタグ名、属性名、使い方。【HTML・解説・初心者向け】| ノブレコ
nobreco
リンクに関するタグの一覧
この記事では、「リンク」するために必要なタグを紹介します。
タグの役割、タグ名や意味だけを取り上げて説明しています。
参考程度によろしければ見ていって下さい！
リンクとは
リンクには「結び付ける（関連付ける）」という意味があります。
HTMLでは、他の部分（要素）や、別のファイル同士を結び付けるのに、「linkタグ」を使います。
linkタグで結び付けることによって、一瞬でリンク先に移動したり、リンクで繋いだ先の情報（外部リソース）を引き出すことができます。
ハイパーテキスト（リンク機能のある文章）と名付けられている通り、HTMLではこの「リンク機能」が大きな特徴の一つとなります。
現代では、ほとんどの方が身近に使用している親しみやすい機能です。
<link>タグと<a>タグの関係
<link>タグだけ<a>タグだけでは、実はリンク機能は有効になりません。
では、どうすればリンク機能が有効になるのか？
href属性、rel属性、という属性を付け加えることで、初めてリンク機能が有効になります。
■<link>タグと<a>tタグの違い
同じリンク機能を備えている<link>タグと<a>タグですが、その違いを分かりやすくいうと、ブラウザに表示「されるか」「されない」かです。
<link>タグは、メタデータコンテンツを扱うタグで、主にファイル情報である外部リソースとリンクする要素ですので、ブラウザに表示されることはありませんし、クリックすることはできません。
<a>タグは、メインコンテンツ内の文書で、主に語句や画像などを他のwebサイトページや、同一サイトページでリンクするタグですので、リンク情報はブラウザ上でテキストが青色として表示されて、こちらはクリックできるものになります。
<link>（リンク）
<link>とは
主に<head>要素内で使用します。
外部ファイルと結びつけることを目的としています。
外部ファイルには例えば、現在編集中のHTMLファイルとは別に作成したCSSファイルなどがあります。
※この<link>要素は基本的にリンク情報がブラウザには表示されません。
<link>は、href属性とrel属性を合わせて使う：
href属性は「リンク先のURL」を示す属性です。
rel属性は「リンク元とリンク先の関係性」を示す属性です。
感覚としては、リンク元の日本人から見て、リンク先は外国人である。のような捉え方になります。
この二つの属性を<link>に使用することによって、外部のスタイルシートの適応や、ファビコンへのリンクなど様々なことができるようになります。
記述例：
外部のスタイルシートを読み込む場合
<link rel="stylesheet" href="CSSファイル名">
「hrefで指定したCSSファイル名をstylesheetと名付け、読み込みにはそのCSSファイル名を使います」というようになります。
もう少し簡単に言うと
「html文書に外部からstylesheetとして、CSSファイル名を読み込みます。」
というような捉え方になります。
<link>:使える属性一覧
・as
・crossorigin
・anonymous
・use-credentials
・disabled
・href
・hreflang
・imagesize
・integrity
・media
・prefetch
・referrerpolicy
・rel
・sizes
・title
・methods
・taget
<a>（アンカー）
<a>とは
<body>要素内で使用します。
アンカー（anchor）を略したもので、「いかりを下ろしてリンク先と繋ぎ固定する」といった意味があります。
つまりリンク先を示すものです。
※リンク情報がブラウザ上に表示されます。
<a>にhref属性を付ける：
href属性は「リンク先のURL」を示す属性です。
よく使われるものは<a>タグに、href属性を付けることによって、外部リソースや、同一ページでのハイパーリンクを使用可能にするものです。
記述例：
<a href="任意のリンク先">任意のコンテンツ内容</a>
リンク先の到達点について：
リンク先である到達点に使い方によって、"href属性値"（URL）内の記述方法が異なります。
以下にその種類を紹介します。
リンク先の指定項目：（コードにhref属性が関わるもののみ）
・同一ページ内の要素へリンク
・ファイルの絶対パスへリンク（インターネット上に示されるアドレス）
・ファイルの相対パスへリンク（○/○/○/のように、階層的にファイルの位置関係を示して表す）
・メールアドレスへリンク
・電話番号へリンク
・画像やロゴにリンク
更にリンク機能に効果を付与する：
・ファイルをダウンロードできるようにする
・リンク先を新しいタブかウインドウで開く
・リンクに説明文を付ける
<a>：使える属性一覧
・href
・freflang
・ping
・referrerpolicy
・rel
・target
・type
まとめ
この記事では、基本的なリンクに使用するタグの説明だけにしました。
リンク機能を使いたいのであれば、<link>と<a>の役割をちゃんと把握しておくこと。
・ユーザー以外（CPU）が使用する情報リンクは<head>要素内に記述。
・ユーザーが見たり、クリックしたりするような情報リンクは<body>要素内に記述。
また別ページのファイルとリンクするのか？それともhtml要素内の要素同士でリンクするのか？というようなパターンで分けて考えて見てもいいと思います。
それに加えて、使用に応じた様々な属性もあるので、順番に覚えていきましょう！
最後まで読んでいただき、ありがとうございました(❁´◡`❁)
