Perbedaan antara SRC dan HREF

The SRCdan HREFatribut yang digunakan untuk memasukkan beberapa entitas eksternal seperti gambar, file CSS, file HTML, setiap halaman web lain atau file JavaScript.

Apakah ada perbedaan yang jelas antara SRCdan HREF? Di mana atau kapan harus menggunakan SRCatau HREF? Saya pikir mereka tidak dapat digunakan secara bergantian.

Saya memberikan beberapa contoh di bawah ini di mana atribut ini digunakan:

• Untuk merujuk file CSS: href="cssfile.css"di dalam tag tautan.
• Untuk merujuk file JS: src="myscript.js"di dalam tag skrip.
• Untuk merujuk file gambar: src="mypic.jpg"di dalam tag gambar.
• Untuk merujuk halaman web lain: href="http://www.webpage.com"di dalam tag jangkar.

CATATAN: Jawaban @ John-Yin lebih tepat mengingat perubahan dalam spesifikasi.

Iya. Ada perbedaan antara src dan href dan mereka tidak dapat digunakan secara bergantian. Kami menggunakan src untuk elemen yang diganti sementara href untuk membangun hubungan antara dokumen referensi dan sumber daya eksternal.

Atribut href (Referensi Hiperteks) menentukan lokasi sumber daya Web sehingga mendefinisikan tautan atau hubungan antara elemen saat ini (dalam kasus jangkar a) atau dokumen saat ini (dalam kasus link) dan jangkar tujuan atau sumber daya yang ditentukan oleh atribut ini. Ketika kita menulis:

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

Browser memahami bahwa sumber daya ini adalah stylesheet dan pengolahanpenguraian halaman tidak dijeda (rendering mungkin dijeda karena browser membutuhkan aturan gaya untuk melukis dan merender halaman). Ini tidak sama dengan membuang konten file css di dalam styletag. (Karena itu disarankan untuk menggunakan linkdaripada @importmelampirkan stylesheet ke dokumen html Anda.)

Atribut src (Source) hanya menyematkan sumber daya dalam dokumen saat ini di lokasi definisi elemen. Untuk misalnya. Saat browser ditemukan

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

Pemuatan dan pemrosesan halaman dihentikan sementara sampai browser mengambil, mengkompilasi dan mengeksekusi file. Ini mirip dengan membuang konten file js di dalam scripttag. Serupa halnya dengan imgtag. Ini adalah tag kosong dan konten, yang harus masuk ke dalamnya, ditentukan oleh srcatribut. Peramban menjeda pemuatan hingga mengambil dan memuat gambar. [Begitu juga halnya dengan iframe]

Ini adalah alasan mengapa disarankan untuk memuat semua file JavaScript di bagian bawah (sebelum </body>tag)

pembaruan : Rujuk jawaban John-Yin untuk info lebih lanjut tentang bagaimana penerapannya sesuai spesifikasi HTML 5.

Jawaban apnerve benar sebelum HTML 5 keluar, sekarang sedikit lebih rumit.

Misalnya, scriptelemen, menurut spesifikasi HTML 5 , memiliki dua atribut global yang mengubah cara srcfungsi atribut: asyncdan defer. Ini mengubah cara skrip (embedded inline atau diimpor dari file eksternal) harus dijalankan.

Ini berarti ada tiga mode yang mungkin dapat dipilih menggunakan atribut ini:

1. Ketika asyncatribut hadir, maka skrip akan dijalankan secara tidak sinkron, segera setelah itu tersedia.
2. Ketika asyncatribut tidak ada tetapi deferatribut ada, maka skrip dieksekusi ketika halaman telah selesai diuraikan.
3. Ketika tidak ada atribut yang hadir, maka skrip diambil dan dieksekusi segera, sebelum agen pengguna terus mengurai halaman.

Untuk detailnya, lihat rekomendasi HTML 5

Saya hanya ingin memperbarui dengan jawaban baru untuk siapa pun yang sesekali mengunjungi topik ini. Beberapa jawaban harus diperiksa dan diarsipkan oleh stackoverflow dan setiap orang dari kita.

Saya pikir <src>menambahkan beberapa sumber daya ke halaman dan <href>hanya untuk menyediakan tautan ke sumber daya (tanpa menambahkan sumber daya itu sendiri ke halaman).

Definisi Sederhana

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) - Saya ingin memuat sumber daya ini untuk diri saya sendiri.

Sebagai contoh:

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 ) - Saya ingin merujuk sumber ini untuk orang lain.

Sebagai contoh:

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">

Kesopanan

H REF : Adalah REF erence ke informasi untuk halaman saat ini yaitu info css untuk gaya halaman atau tautan ke halaman lain. Parsing Halaman tidak berhenti.

SRC : Apakah SUMBER yang akan ditambahkan / dimuat ke halaman seperti dalam gambar atau javascript. Parsing Halaman mungkin berhenti tergantung pada atribut kode. Itulah mengapa lebih baik menambahkan skrip tepat sebelum tag body akhir agar rendering halaman tidak tertunda.

Jika Anda berbicara HTML4, daftar atributnya mungkin membantu Anda dengan seluk-beluknya. Mereka tidak bisa dipertukarkan.

Dari W3:

Ketika atribut href elemen A diatur, elemen tersebut mendefinisikan jangkar sumber untuk tautan yang dapat diaktifkan oleh pengguna untuk mengambil sumber daya Web. Jangkar sumber adalah lokasi instance A dan jangkar tujuan adalah sumber daya Web.

Sumber: http://www.w3.org/TR/html401/struct/links.html

Atribut ini menentukan lokasi sumber daya gambar. Contoh format gambar yang dikenal luas termasuk GIF, JPEG, dan PNG.

Sumber: http://www.w3.org/TR/REC-html40/struct/objects.html

Definisi sederhana

• SRC: Jika sumber daya dapat ditempatkan di dalam tag tubuh (untuk gambar, skrip, iframe, bingkai)
• HREF: Jika sumber daya tidak dapat ditempatkan di dalam tag tubuh dan hanya dapat ditautkan (untuk html, css)

Anda harus ingat ketika menggunakan semua orang dan yang itu
yang href digunakan dengan link

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

yang src digunakan dengan script dan gambar

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

yang url digunakan umumnya dalam CSS untuk memasukkan sesuatu, untuk contoh untuk menambahkan gambar latar belakang

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

setelah melalui dokumentasi HTML 5.1 (1 November 2016):

bagian 4 (Unsur-unsur HTML)

bab 2 (Dokumen metadata)

bagian 4 (Elemen tautan) menyatakan bahwa:

Tujuan tautan diberikan oleh hrefatribut, yang harus ada dan harus berisi URL kosong yang berpotensi dikelilingi oleh spasi. Jika hrefatribut tidak ada, maka elemen tidak menentukan tautan.

tidak mengandung src atribut ...

penyihir itu logis karena itu adalah tautan.

bab 12 (Scripting)

bagian 1 (Elemen skrip) menyatakan bahwa:

Skrip klasik dapat disematkan sebaris atau dapat diimpor dari file eksternal menggunakan srcatribut, yang jika ditentukan memberikan URL sumber skrip eksternal untuk digunakan. Jika srcditentukan, itu harus berupa URL non-kosong yang valid yang berpotensi dikelilingi oleh spasi. Isi elemen skrip inline, atau sumber skrip eksternal, harus sesuai dengan persyaratan produksi Skrip spesifikasi JavaScript untuk skrip klasik.

bahkan tidak menyebutkan hrefatribut ...

ini menunjukkan bahwa saat menggunakan tag skrip selalu menggunakan srcatribut !!!

bab 7 (Konten tertanam)

bagian 5 (Elemen img)

Gambar yang diberikan oleh srcdan srcsetatribut, dan atribut elemen sumber saudara sebelumnya srcsetjika induknya adalah pictureelemen, adalah konten yang disematkan.

juga tidak menyebutkan hrefatribut ...

ini menunjukkan bahwa ketika menggunakan imgtag, srcatribut harus digunakan juga ...

Tautan referensi ke Rekomendasi W3C

Mereka tidak dapat dipertukarkan - masing-masing didefinisikan pada elemen yang berbeda, seperti dapat dilihat di sini .

Mereka memang memiliki makna yang serupa, jadi ini adalah inkonsistensi. Saya akan berasumsi sebagian besar karena tag yang berbeda diterapkan oleh vendor yang berbeda untuk memulai, kemudian dimasukkan ke dalam spesifikasi untuk menghindari melanggar kompatibilitas ke belakang.

Mereka tidak memiliki arti yang serupa. 'src' menunjukkan sumber daya yang harus diambil oleh browser sebagai bagian dari halaman saat ini. HREF mengindikasikan suatu sumber daya yang harus diambil jika pengguna memintanya.

Saya setuju apa yang dikatakan apnerve tentang perbedaan itu. Tetapi dalam kasus css itu terlihat aneh. Sebagai css juga akan diunduh ke klien oleh browser. Ini tidak seperti tag jangkar yang menunjuk ke sumber daya tertentu. Jadi menggunakan href sepertinya aneh bagi saya. Bahkan jika itu tidak dimuat dengan halaman masih tanpa halaman itu tidak dapat terlihat lengkap dan tidak hanya hubungan tetapi seperti sumber daya yang pada gilirannya merujuk ke banyak sumber daya lain seperti gambar.

src digunakan untuk menambahkan sumber daya itu ke halaman, sedangkan href digunakan untuk menautkan ke sumber daya tertentu dari halaman itu.

Ketika Anda gunakan di halaman web Anda, browser melihat bahwa itu adalah style sheet dan karenanya melanjutkan dengan rendering halaman ketika style sheet diunduh dalam parellel.

Saat Anda gunakan di halaman web Anda, ia memberi tahu browser untuk memasukkan sumber daya di lokasi. Jadi sekarang browser harus mengambil file js dan kemudian memuatnya. Sampai browser menyelesaikan proses pemuatan, proses rendering halaman terhenti. Itulah alasan mengapa YUI merekomendasikan untuk memuat file JS Anda di bagian paling bawah halaman web Anda.