What are all the differences between src and data-src attributes

Question

What are differences and consequences  both good and bad  of using either data-src or src attribute of img tag  Can I achieve the same results using both  If so  when should be used each of them

User · Answer

The first  lt img   gt  is invalid - src is a required attribute  data-src is an attribute than can be leveraged by  say  JavaScript  but has no presentational meaning

User · Answer

If you want the image to load and display a particular image  then use  src to load that image URL   If you want a piece of meta data  on any tag  that can contain a URL  then use data-src or any data-xxx that you want to select   MDN documentation on data-xxxx attributes  https   developer mozilla org en-US docs DOM element dataset  Example of src on an image tag where the image loads the JPEG for you and displays it    lt img id  myImage  src  http   mydomain com foo jpg  gt    lt script gt      var imageUrl   document getElementById  myImage   src   lt  script gt    Example of  data-src  on a non-image tag where the image is not loaded yet - it s just a piece of meta data on the div tag    lt div id  myDiv  data-src  http   mydomain com foo jpg  gt    lt script gt         in all browsers     var imageUrl   document getElementById  myDiv   getAttribute  data-src            or in modern browsers     var imageUrl   document getElementById  myDiv   dataset src   lt  script gt    Example of data-src on an image tag used as a place to store the URL of an alternate image    lt img id  myImage  src  http   mydomain com foo jpg  data-src  http   mydomain com foo jpg  gt    lt script gt      var item   document getElementById  myImage           switch the image to the URL specified in data-src     item src   item dataset src   lt  script gt

User · Answer

data-src attribute is part of the data-  attributes collection introduced in HTML5  data-src allow us to store extra data that have no meaning to the browser but that can be use by Javascript Code or CSS rules

User · Answer

Well the data src attribute is just used for binding data for example ASP NET      W3School src attribute  MSDN datasrc attribute

User · Answer

The attributes src and data-src have nothing in common  except that they are both allowed by HTML5 CR and they both contain the letters src  Everything else is different   The src attribute is defined in HTML specs  and it has a functional meaning   The data-src attribute is just one of the infinite set of data-  attributes  which have no defined meaning but can be used to include invisible data in an element  for use in scripting  or styling

[html] What are all the differences between src and data-src attributes?

Examples related to html

Examples related to image