The mystery of src and href

+1 Eric Persson · December 28, 2014
I have a question regarding the use of href vs src in HTML.

I feel that href sounds more like an "adress linking-type" of atribute, since it stands for "hyper reference" which is a linked reference if you think about it. 

src on the other hand feels more like it would refer to something on your own computer, don't ask me why, it just feels that way. 

but why exactly is the <img> tag using src for linking in a picture when it often uses a url from the web rather than a file on the computer, but the <link> tag uses href for the css file, even though it can be linked directly from the computer, and not only from an online library like bootstrap?


What is the difference between src and href?

Post a Reply


Oldest  Newest  Rating
+1 Shreyansh Rana · December 28, 2014
Yes. There is a differentiation between src and href and they can't be used interchangeably. We use srcfor replaced elements while href for establishing a relationship between the referencing document and an external resource.
href 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 isnot 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 is is advisable to use link rather than @import for attaching stylesheets to your html document.)
src 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 

0 Eric Persson · December 28, 2014
Aha, I see! But some times the page will load completley, and the images comes afterwards. 
Is this due to the fact that the images might have been added in the css rather than the html?
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.