Difference between SRC and HREF

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 or 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.

Solution 1:

NOTE: @John-Yin's answer is more appropriate considering the changes in the specs.

Yes. There is a differentiation between src and href and they can't be used interchangeably. We use src for replaced elements while href for establishing a relationship between the referencing document and an external resource.

href (Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute. When we write:

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

The browser understands that this resource is a stylesheet and the processing parsing of the page is not paused (rendering might be paused since the browser needs the style rules to paint and render the page). It is not similar to dumping the contents of the css file inside the style tag. (Hence it is advisable to use link rather than @import for attaching stylesheets to your html document.)

src (Source) attribute just embeds the resource in the current document at the location of the element's definition. For eg. When the browser finds

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

The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the script tag. Similar is the case with img tag. It is an empty tag and the content, that should come inside it, is defined by the src attribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]

This is the reason why it is advisable to load all JavaScript files at the bottom (before the </body> tag)

update : Refer @John-Yin's answer for more info on how it is implemented as per HTML 5 specs.

Solution 2:

apnerve's answer was correct before HTML 5 came out, now it's a little more complicated.

For example, the script element, according to the HTML 5 specification, has two global attributes which change how the src attribute functions: async and defer. These change how the script (embedded inline or imported from external file) should be executed.

This means there are three possible modes that can be selected using these attributes:

1. When the async attribute is present, then the script will be executed asynchronously, as soon as it is available.
2. When the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.
3. When neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

For details please see HTML 5 recommendation

I just wanted to update with a new answer for whoever occasionally visits this topic. Some of the answers should be checked and archived by stackoverflow and every one of us.

Solution 3:

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).

Solution 4:

HREF: Is a REFerence to information for the current page ie css info for the page style or link to another page. Page Parsing is not stopped.

SRC: Is a reSOURCE to be added/loaded to the page as in images or javascript. Page Parsing may stop depending on the coded attribute. That is why it's better to add script just before the ending body tag so that page rendering is not held up.