プロローグ
何となくでHTMLを書いていたのですが（よくない）、そういえばsrc,href,relってよく使うけど、ちゃんと説明できないなと思い、今回まとめてみました。
何となく書いて、何となく使えてるから、こういうもんだよねって１つ１つのタグや属性を適当にあしらっていてはいけないです。
特に、私は初心者なので、わからないことはすぐ調べて、解釈して自分の言葉で発信することが大切なのかなと思います。
ということで、今回はHTMLで使う属性【src / href / rel】についてまとめていきます。
rel属性について
rel属性に関して、まずlinkタグを知る必要があります。
こちらに詳しく書いてありますので、ご参考に。
HTMLのlinkタグとは？基本的な書き方とrel属性まとめ
：記載したリンク先（href)と現在のページとの関係性を説明する属性
外部ファイルと、現在のページの接続をしてくれるのです。
linkタグ以外にも、aタグ、areaタグに使用できます。
Q:書かないと、どうなる？
接続ができなくなるので、設定したものが無効になります。
例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link href="slideshow.css"> #hrefだけ
</head>
Q:stylesheetをよく使うけど、他にどんなのがあるの？
下記の属性値があります。
バージョンによって異なると思いますので、詳細は調べてみてください。
また、linkタグ、aタグ、areaタグによって、使用できるできないもあります。
１つ１つ丁寧に解説してくださっている記事がございました。
[HTML] Aタグにおけるrel属性の意味と効果について
| 属性値 | 意味 |
|---|---|
| alternate | 現在のhtmlを置換える。代替文書。 |
| author | 著者情報。 |
| help | リンク先が現在のページの内容を説明する。 |
| icon | 現在のページに記載するアイコン。 |
| license | 著作権にかんするリンクをしていする。 |
| next | 現在のページの続きのリンクを表す。 |
| nofollow | リンク先が現在のページと関係ないことを示す。 |
| prefetch | リンク先を事前に読み取る。 |
| prev | 現在のページの前回のリンクを表す。 |
| search | 現在のページを検索するためのリンクを表す。 |
| styleshee | スタイルシート。 |
| tag | 関連するタグ。 |
他にも色々ありました。
href属性について
：外部のリンク先を指定する属性のこと。 他のリンク先へのハイパーリンクを指定する属性。
Q:ハイパーリンクってなに？
ハイパーリンクとは指定範囲のテキストまたは画像を他のページなどへリンクさせ、その部分を選択することでそのリンク先へ移動できるようにする要素。
通常は単にリンクと呼び、ハイパーリンクをつけることをリンクを張るという
(参照：wiki HTML/ハイパーリンク）
src属性について
：画像や別のページ（例えば、同じファイルにあるqiita.jsとか）の情報をもってくる属性。現在のページに埋め込む。
Q:hrefとsrcの違いってなに？
=>私のhrefとsrcの違いのざっくりイメージ
・htefは、現在のページからリンク先へ移動する。別ページの情報を取ってくる。
現在のページ→href→参照元
・srcは、現在のページの元になるデータやページを呼び込む。取り寄せる。
現在のページ←src←参照元
なのかなと思いました。
間違えてたらご教授お願い致します🙇♂️