なぜJavaScriptはsrcで取り込むのに、CSSはhrefで参照するのか？

今更ですが、疑問に思ったことを調べたので、メモしておきます。

htmlのコーディングでは、URLを指定することがあります。

例
①　img src=”image.jpg”
②　script src=”script.js”
③　a href=”https://example.com”
④　link rel=”stylesheet” href=”style.css”

①画像と②JavaScriptは「src=」と記述し、③リンクと④CSSは「href=」と記述します。

この違いはなぜなのか。Copilotに聞いた結果、次のような回答を得ました。

src: リソースがドキュメントに直接ロードされる。リソースはページの一部として即座に表示または実行されます。例えば、画像（<img>）やスクリプト（<script>）。

href: リソースがドキュメントに間接的に適用される。リソースはページの一部として表示されるわけではなく、参照されることで適用されます。例えば、スタイルシート（<link rel="stylesheet">）。

src: コンテンツとして使用されるリソース。画像、ビデオ、オーディオ、スクリプトなど。

href: 文書の一部としてのリンク。スタイルシート、ウェブページへのリンク、ファビコン（ブラウザのタブやブックマークに表示される小さなアイコン）など。

srcは、映画のフィルムそのものです。映画館に行って、映画フィルム（src）をプロジェクターにセットして、観客に映像を見せるイメージです。映画フィルムがないと、映画は再生されません。
hrefは、映画の脚本（シナリオ）です。映画の撮影が始まる前に、脚本を参照して映画全体の方向性を決めるようなイメージです。脚本があれば、映画全体の構成やストーリーが決まりますが、観客が直接脚本を見ることはありません。

srcは、料理の材料です。実際の料理（画像やスクリプト）を作るための具体的な材料で、料理をするために材料が直接使われます。材料がなければ、料理を作ることができません。
hrefは、料理のレシピです。料理を作るための指示書（スタイルシート）で、レシピを参照することで料理の全体の手順や味付けが決まりますが、料理そのものにはレシピが含まれているわけではありません。

srcは、本の本文です。ページに実際の内容（画像やスクリプト）が表示され、読者がその内容を読むことができます。本の本文がないと、内容を理解することはできません。
hrefは、本の目次です。目次を参照することで、本の全体の構成や章立てがわかりますが、目次そのものは本の内容には含まれていません。

srcは、交通手段（バス、電車など）です。実際に移動するための手段で、バスや電車に乗ることで目的地に到達します。
hrefは、地図です。目的地に到達するための指示書で、地図を参照することでどの交通手段を使うか、どのルートを通るかが決まりますが、地図そのものに乗って移動するわけではありません。

srcは「埋め込み」、hrefは「参照」という違いがあることは理解できたけど、自分のような初心者がそれを見分けることはできないので、結局一つずつ覚えるしかないようです。