Difference between SRC and HREF

Question

The SRC and HREF attributes are used to include some external entities like an image, a CSS file, a html file, any other web page or a javascript file.

Is there a clear differentiation between SRC and HREF? where/when to use SRC or HREF? I think they can't be used interchangeably.

I'm giving below few examples where these attributes are used:

To refer a CSS file: href="cssfile.css" inside the link tag

To refer a js file: src="myscript.js" inside the script tag

To refer an image file: src="mypic.jpg" inside an image tag

To refer another webpage: href="http://www.webpage.com" inside an anchor tag

Answer 1

The reason is named W3C.

Answer 2

If you're talking HTML4, its list of attributes might help you with the subtleties. They're not interchangeable.

Answer 3

They are not interchangeable - each is defined on different elements, as can be seen here.

They do indeed have similar meanings, so this is an inconsistency. I would assume mostly due to the different tags being implemented by different vendors to begin with, then subsumed into the spec as is to avoid breaking backwards compatibility.

Answer 4

I think <src> adds some resources to the page and <href> is just for providing a link to a resource(without adding the resource itself to the page).

Answer 5

They don't have similar meanings. 'src' indicates a resource the browser should fetch as part of the current page. HREF indicatea a resource to be fetched if the user requests it.

Answer 6

From W3:

When the A element's href attribute is set, the element defines a source anchor for a link that may be activated by the user to retrieve a Web resource. The source anchor is the location of the A instance and the destination anchor is the Web resource.

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

This attribute specifies the location of the image resource. Examples of widely recognized image formats include GIF, JPEG, and PNG.

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