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

User · Answer

Simple Definition  SRC    Source   To specify the origin of  a communication   document        HREF    Hypertext Reference   A reference or link to another page  document

User · Answer

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    lt link href  style css  rel  stylesheet    gt    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   lt script src  script js  gt  lt  script gt    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  lt  body gt  tag     update   Refer  John-Yin s answer for more info on how it is implemented as per HTML 5 specs

User · Answer

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

User · Answer

I think  lt src gt  adds some resources to the page and  lt href gt  is just for providing a link to a resource without adding the resource itself to the page

User · Answer

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

User · Answer

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    When the async attribute is present  then the script will be executed asynchronously  as soon as it is available   When the async attribute is not present but the defer attribute is present  then the script is executed when the page has finished parsing   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

User · Answer

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

User · Answer

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

User · Answer

You should remember when to use everyone and that is it the href is used with links    lt a href     gt  lt  a gt   lt link rel  stylesheet  href  style css    gt    the src is used with scripts and images   lt img src  the image link    gt   lt script type  text javascript  src      gt    the url is used generally in CSS to include something  for exemple to add a background image  selector   background-image  url  the image link

User · Answer

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

User · Answer

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

User · Answer

SRC Source   -- I want to load up this resource for myself   For example     Absolute URL with script element   lt script src  http   googleapi com jquery script js  gt  lt  script gt      Relative URL with img element    lt img src  mypic jpg  gt    HREF Hypertext REFerence  -- I want to refer to this resource for someone else   For example     Absolute URL with anchor element   lt a href  http   www google com   gt Click here lt  a gt   Relative URL with link element   lt link href  mystylesheet css  type  text css  gt    Courtesy

User · Answer

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

User · Answer

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

User · Answer

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

[html] Difference between SRC and HREF

Examples related to html