[html] 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.

src is to used to add that resource to the page, whereas href is used to link to a particular resource from that page.

When you use in your webpage, the browser sees that its a style sheet and hence continues with the page rendering as the style sheet is downloaded in parellel.

When you use in your webpage, it tells the browser to insert the resource at the location. So now the browser has to fetch the js file and then loads it. Until the browser finishes the loading process, the page rendering process is halted. That is the reason why YUI recommends to load your JS files at the very bottom of your web page.

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

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.

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.

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.

SRC(Source) -- I want to load up this resource for myself.

For example:

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF(Hypertext REFerence) -- I want to refer to this resource for someone else.

For example:

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

Courtesy

Simple Definition

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

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

A simple definition

• SRC: If a resource can be placed inside the body tag (for image, script, iframe, frame)
• HREF: If a resource cannot be placed inside the body tag and can only be linked (for html, css)

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.

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

You should remember when to use everyone and that is it
the href is used with links

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

the src is used with scripts and images

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

the url is used generally in CSS to include something, for exemple to add a background image

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

after going through the HTML 5.1 ducumentation (1 November 2016):

part 4 (The elements of HTML)

chapter 2 (Document metadata)

section 4 (The link element) states that:

The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.

does not contain the src attribute ...

witch is logical because it is a link .

chapter 12 (Scripting)

section 1 (The script element) states that:

Classic scripts may either be embedded inline or may be imported from an external file using the src attribute, which if specified gives the URL of the external script resource to use. If src is specified, it must be a valid non-empty URL potentially surrounded by spaces. The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification’s Script production for classic scripts.

it doesn't even mention the href attribute ...

this indicates that while using script tags always use the src attribute !!!

chapter 7 (Embedded content)

section 5 (The img element)

The image given by the src and srcset attributes, and any previous sibling source element's srcset attributes if the parent is a picture element, is the embedded content.

also doesn't mention the href attribute ...

this indicates that when using img tags the src attribute should be used aswell ...

Reference link to the W3C Recommendation

I agree what apnerve says on the distinction. But in case of css it looks odd. As css also gets downloaded to client by browser. It is not like anchor tag which points to any specific resource. So using href there seems odd to me. Even if its not loaded with the page still without that page cannot look complete and so its not just relationship but like resource which in turn refers to many other resource like images.