SRCとHREFの違い

SRCそしてHREF属性は、画像、CSSファイル、HTMLファイル、他のWebページやJavaScriptファイルのようないくつかの外部エンティティを含めるために使用されています。

との間には明確な違いがSRCありHREFますか？どこで、いつ使用するSRCか、またはHREF？私はそれらを互換的に使用することはできないと思います。

これらの属性が使用されるいくつかの例を以下に示します。

• CSSファイルを参照するには：href="cssfile.css"linkタグ内。
• JSファイルを参照するには：src="myscript.js"scriptタグ内。
• 画像ファイルを参照するには：src="mypic.jpg"画像タグ内。
• 別のウェブページを参照するには：href="http://www.webpage.com"アンカータグ内。

注： @ John-Yinの回答は、仕様の変更を考慮するとより適切です。

はい。srcとhrefの間には違いがあり、それらを交換して使用することはできません。私たちは、使用SRCのために交換しながら、要素のhref参照する文書と外部リソース間の関係を確立するため。

href（ハイパーテキスト参照）属性は、Webリソースの場所を指定し、現在の要素（anchorの場合a）または現在のドキュメント（の場合link）とこの属性で定義された宛先アンカーまたはリソースの間のリンクまたは関係を定義します。私たちが書くとき：

<link href="style.css" rel="stylesheet" />

ブラウザは、このリソースがスタイルシートであり、 処理ページの解析は一時停止されません（ブラウザーがページをペイントしてレンダリングするにはスタイルルールが必要なため、レンダリングが一時停止される可能性があります）。それはない内部のCSSファイルの内容をダンプに似styleタグ。（したがって、HTMLドキュメントにスタイルシートを添付するlinkよりも@import、使用することをお勧めします。）

src（ソース）属性は、現在のドキュメントの要素の定義の場所にリソースを埋め込むだけです。たとえば ブラウザが見つけたとき

<script src="script.js"></script>

このブラウザがファイルをフェッチ、コンパイル、実行するまで、ページの読み込みと処理は一時停止されます。これは、scriptタグ内のjsファイルの内容をダンプすることに似ています。imgタグの場合も同様です。これは空のタグであり、その中に含まれるべきコンテンツはsrc属性によって定義されます。ブラウザは、画像をフェッチして読み込むまで、読み込みを一時停止します。[の場合もそうですiframe]

これが、下部（</body>タグの前）にあるすべてのJavaScriptファイルをロードすることが推奨される理由です。

update：HTML 5仕様に従って実装される方法の詳細については、@ John-Yinの回答を参照してください。

HTML 5が登場する前はapnerveの答えは正しかったが、今はもう少し複雑になっている。

たとえばscript、HTML 5仕様によると、要素には、src属性の機能を変更する2つのグローバル属性がasyncありdeferます。これらは、スクリプト（インラインに埋め込まれた、または外部ファイルからインポートされた）の実行方法を変更します。

つまり、これらの属性を使用して選択できるモードは3つあります。

1. async属性が存在する場合、スクリプトは利用可能になるとすぐに非同期で実行されます。
2. ときにasync属性が存在しないがdefer、属性が存在している場合、スクリプトは、ページが構文解析を完了したときに実行されます。
3. どちらの属性も存在しない場合、ユーザーエージェントがページの解析を続行する前に、スクリプトがフェッチされてすぐに実行されます。

詳細については、HTML 5の推奨事項を参照してください

私はこのトピックに時々アクセスする人のために、新しい回答で更新したかっただけです。回答の一部は、stackoverflowと私たち全員がチェックしてアーカイブする必要があります。

<src>ページにいくつかのリソースを追加し、リソースへの<href>リンクを提供するためのものだと思います（リソース自体をページに追加することはありません）。

簡単な定義

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

SRC（S ou rc e）-このリソースを自分でロードしたい。

例えば：

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF（H ypertext REF erence ）-このリソースを他の人に紹介したい。

例えば：

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

礼儀

H REFは：ですREFの現在のページの情報へレンス他のページへのページのスタイルやリンクのすなわちCSS情報。ページ解析は停止されません。

SRCは：再のですSOURCE追加する/画像やJavaScriptのようにページにロード。コード化された属性によっては、ページ解析が停止する場合があります。そのため、ページのレンダリングが滞らないように、bodyの終了タグの直前にスクリプトを追加することをお勧めします。

HTML4について話している場合、その属性のリストは微妙な点で役立ちます。互換性はありません。

W3から：

A要素のhref属性が設定されている場合、この要素は、ユーザーがWebリソースを取得するためにアクティブ化できるリンクのソースアンカーを定義します。ソースアンカーはAインスタンスの場所であり、宛先アンカーはWebリソースです。

出典：http : //www.w3.org/TR/html401/struct/links.html

この属性は、画像リソースの場所を指定します。広く認識されている画像形式の例には、GIF、JPEG、PNGがあります。

出典：http : //www.w3.org/TR/REC-html40/struct/objects.html

簡単な定義

• SRC：リソースをbodyタグ内に配置できる場合（画像、スクリプト、iframe、フレーム用）
• HREF：リソースをbodyタグ内に配置できず、リンクのみが可能な場合（html、cssの場合）

あなたは誰をいつ使うべきか覚えておくべきです、そしてそれはそれ
がhrefがリンクで使われるということです

<a href="#"></a>
<link rel="stylesheet" href="style.css" />

SRCは、スクリプトやイメージで使用されています

<img src="the_image_link" />
<script type="text/javascript" src="" />

urlは、背景画像を追加するexempleのために、何かを含めるようにCSSで一般的に使用されています

selector { background-image: url('the_image_link'); } 

HTML 5.1文書（2016年11月1日）を通過した後：

パート4（HTMLの要素）

第2章（ドキュメントメタデータ）

セクション4（リンク要素）には、次のように記載されています。

リンクの宛先はhref属性によって指定されます。この属性は存在する必要があり、スペースで囲まれている可能性のある空でない有効なURLを含んでいる必要があります。場合はhref属性が存在しない、その要素はリンクを定義していません。

src属性を含まない...

魔女はリンクなので論理的です。

第12章（スクリプト）

セクション1（script要素）は次のように述べています。

クラシックスクリプトは、インラインで埋め込むか、src属性を使用して外部ファイルからインポートできます。この属性を指定すると、使用する外部スクリプトリソースのURLが提供されます。srcを指定する場合は、空白で囲まれている可能性のある有効な空でないURLである必要があります。インラインスクリプト要素のコンテンツまたは外部スクリプトリソースは、JavaScript仕様の従来のスクリプトのスクリプト作成の要件に準拠している必要があります。

それはhref属性についても言及していません...

これは、スクリプトタグを使用している間は常にsrc属性を使用することを示しています!!!

第7章（埋め込みコンテンツ）

セクション5（img要素）

srcとsrcset属性、および以前の兄弟ソース要素のsrcset属性（親が要素の場合）で指定された画像pictureは、埋め込みコンテンツです。

また、href属性については触れていません...

これは、imgタグを使用するときにsrc属性も使用する必要があることを示しています...

W3C勧告への参照リンク

これらは交換可能ではありません。ここでわかるように、それぞれが異なる要素で定義されています。

それらは確かに類似した意味を持っているので、これは矛盾です。主に異なるベンダーによって実装されている異なるタグが最初に原因であると想定し、後方互換性を壊さないようにそのまま仕様に含めます。

それらは同じような意味を持っていません。「src」は、ブラウザが現在のページの一部としてフェッチするリソースを示します。HREFは、ユーザーが要求した場合にフェッチされるリソースを示します。

私はapnerveが区別について言うことに同意します。しかし、CSSの場合は奇妙に見えます。CSSもブラウザーによってクライアントにダウンロードされます。特定のリソースを指すアンカータグとは異なります。したがって、hrefを使用するのは奇妙に思えます。そのページなしでまだロードされていない場合でも、そのページがないと完全に見えない可能性があります。そのため、その関係だけではなく、リソースなどのリソースも同様に、画像などの他の多くのリソースを参照します。

srcはそのリソースをページに追加するために使用され、hrefはそのページから特定のリソースにリンクするために使用されます。

Webページでを使用すると、ブラウザはそのスタイルシートを認識し、スタイルシートが並列にダウンロードされるときにページのレンダリングを続行します。

Webページでを使用すると、その場所にリソースを挿入するようブラウザに指示します。そのため、ブラウザーはjsファイルをフェッチしてからロードする必要があります。ブラウザが読み込みプロセスを完了するまで、ページのレンダリングプロセスは停止します。それが、YUIがJSファイルをWebページの一番下にロードすることを推奨する理由です。