【HTML】hrefとsrcの違い【属性の知識】

href属性とsrc属性ってなに？

HTMLで<a>タグだとhref、imgだとsrcを使ってurlを書くけど違いは何？

・href属性は、リンクアンカーの移動先や基準URIの設定をするための属性

・src属性は文書内に埋め込むスクリプト、他のHTML文書など、外部リソースのURIを指定します。

（出典：W3 Watch Reference)

これだけみても分からなかったので調査をすることにしました。

reference.hyper-text.org

 

href属性とsrc属性のhrefとsrcって何？

hrefはHypertext Referenceの略語で直訳するとハイパーテキストの参照。

　　　　　　　　　　　　　　　　　　　　　　　　　　（出典：weblio）

srcはsorceの略語で情報源。（出典：weblio）

href属性とsrc属性を使える要素って何があるの？

href属性とsrc属性を使える要素をまとめてみた。

要素

要素概要

href

src

<a>

リンクの出発点を指定する

●

 

<area>

リンク領域を設定する

●

 

<base>

ページに記載されたリンク先URLの基準となるURLを指定する

●

 

<link>

関連する文書ファイルを指定してその関係を定義する

●

 

<audio>

文書内に音声ファイルを埋め込む

 

●

<embed>

文書内に音声や動画などのデータを埋め込む

 

●

<iframe>

文章の中にインラインのフレームを作成する

 

●

<img>

文書内に画像を表示する

 

●

<input>

テキスト入力欄やボタンなどの部品を作成する

 

●

<script>

文書内にスクリプトを埋め込んだり外部からスクリプトを読み込む

 

●

<source>

メディア要素に対して選択可能なリソースを複数指定する

 

●

<video>

文書内に動画ファイルを埋め込む

 

●

 表にまとめるまでは、hrefとsrcの両方を使える要素があると思っていました。

しかしながら、実際にはそのような要素は存在しませんでした。

調査結果からの自分なりの解釈

・href属性について

　href属性は、文章からどこか別の場所に移動したい場合に行き先を指示してあげる属性だと感じました。この解釈だと、link要素でcssファイルを"呼び出す"場合はsrc属性を使うことに納得ができます。linkはhref属性ですね。定義する場所を指示していると認識した方が良さそうです。（２０２０年9月22日修正）

・src属性について

　src属性は、link要素でcssファイルを呼び出すことができます。呼び出すのは文章だったり、動画ファイルだったりJavaスクリプトのようなスクリプトだったり様々なようです。この記事の一番最初に書かれていた”文章内に（ファイルを）埋め込む”属性という認識が一番納得できそうです。

所管

　調査が終わってこの記事を書こうと思っている頃には内容を理解してしまっていて、”自分が何を疑問に思っていたのか”が抜け落ちていることに気が付きました。

記事を描こうと思った動機が曖昧になってしまうと何を書いたら良いのか分からなくなってしまうので

・何を疑問に思ったのか

・なぜ調べようと思ったのか

をしっかりと後から思い出せるようにしていきたいと思います。