Apa saja perbedaan antara atribut src dan data-src?

Apa perbedaan dan konsekuensi (baik dan buruk) dari penggunaan salah satu data-srcatau srcatribut imgtag? Bisakah saya mencapai hasil yang sama dengan menggunakan keduanya? Jika demikian, kapan harus digunakan masing-masing?

Atribut srcdan data-srctidak memiliki kesamaan, kecuali keduanya diizinkan oleh HTML5 CR dan keduanya berisi huruf src. Segala sesuatu yang lain berbeda.

The srcatribut didefinisikan dalam spesifikasi HTML, dan memiliki makna fungsional.

The data-srcatribut hanyalah salah satu dari himpunan tak terbatas data-*atribut, yang ada telah didefinisikan arti tetapi dapat digunakan untuk memasukkan data yang tidak terlihat dalam sebuah elemen, untuk digunakan dalam scripting (atau styling).

Jika Anda ingin gambar memuat dan menampilkan gambar tertentu, gunakan .srcuntuk memuat URL gambar itu.

Jika Anda menginginkan sepotong data meta (pada tag apa pun) yang dapat berisi URL, gunakan data-srcatau apa pun data-xxxyang ingin Anda pilih.

Dokumentasi MDN pada atribut data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Contoh srcpada tag gambar di mana gambar memuat JPEG untuk Anda dan menampilkannya:

<img id="myImage" src="http://mydomain.com/foo.jpg">

<script>
    var imageUrl = document.getElementById("myImage").src;
</script>

Contoh 'data-src' pada tag non-gambar yang gambarnya belum dimuat - ini hanya sebagian dari meta data pada tag div:

<div id="myDiv" data-src="http://mydomain.com/foo.jpg">

<script>
    // in all browsers
    var imageUrl = document.getElementById("myDiv").getAttribute("data-src");

    // or in modern browsers
    var imageUrl = document.getElementById("myDiv").dataset.src;
</script>

Contoh data-srcpada tag gambar yang digunakan sebagai tempat untuk menyimpan URL dari gambar alternatif:

<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">

<script>
    var item = document.getElementById("myImage");
    // switch the image to the URL specified in data-src
    item.src = item.dataset.src;
</script>

Yang pertama <img />tidak valid - srcadalah atribut wajib. data-srcadalah atribut yang dapat dimanfaatkan oleh, katakanlah, JavaScript, tetapi tidak memiliki arti presentasi.

Atribut data-src adalah bagian dari kumpulan atribut data- * yang diperkenalkan di HTML5. data-src memungkinkan kita menyimpan data tambahan yang tidak ada artinya bagi browser tetapi dapat digunakan oleh Kode Javascript atau aturan CSS.

Nah atribut data src hanya digunakan untuk mengikat data misalnya ASP.NET ...

Atribut src W3School

Atribut MSDN datasetrc