プロローグ

何となくでHTMLを書いていたのですが（よくない）、そういえばsrc,href,relってよく使うけど、ちゃんと説明できないなと思い、今回まとめてみました。

何となく書いて、何となく使えてるから、こういうもんだよねって１つ１つのタグや属性を適当にあしらっていてはいけないです。
特に、私は初心者なので、わからないことはすぐ調べて、解釈して自分の言葉で発信することが大切なのかなと思います。

ということで、今回はHTMLで使う属性【src / href / rel】についてまとめていきます。

rel属性について

rel属性に関して、まずlinkタグを知る必要があります。
こちらに詳しく書いてありますので、ご参考に。

HTMLのlinkタグとは？基本的な書き方とrel属性まとめ

：記載したリンク先（href)と現在のページとの関係性を説明する属性

外部ファイルと、現在のページの接続をしてくれるのです。
linkタグ以外にも、aタグ、areaタグに使用できます。

Q:書かないと、どうなる？
接続ができなくなるので、設定したものが無効になります。

例

qiita.html

<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←参照元

なのかなと思いました。
間違えてたらご教授お願い致します🙇‍♂️

参考記事