What's the difference between href and src attributes?


What’s the difference between href and src attributes?


The href attribute specifies the location (URL) of a resource, that an anchor element points to, or the location of a linked resource, like a stylesheet. While the src attribute is used to embed a resource - usually URLs - into a document, think embedded images (<img>) and <script> tags.


I can’t quite wrap my mind around it, this difference is not clear. What’s the difference between specifying a location and embedding a resource?

As mentioned, href requests a resource such as a webpage, a form handler, a block quote reference page, or a style sheet. In many cases (save for style sheets) the link will open a new webpage, from which the back button should return us to the previous page.

src indicates a resource that is embedded in the current document, such as, img, video, audio, or script. The browser will allocate screen real estate depending upon the physical dimensions of the embedded object. href has no such provision.


What does href stand for?

1 Like
HTTP reference

where the HT stands for HyperText, so what we have is a HyperTextReference, or href.

Anchors are bound to what they hook onto, hence the name given to navigation (site or external) links, <a>, where ‘a’ stands for anchor. We can take this into consideration and give href another name that extends the vernacular… hook reference. This is slang. Nonetheless, a valid alias for hypertext reference.

<a>: The Anchor element - HTML: HyperText Markup Language | MDN


how we upload our own photos to the website

The same way we upload pages. FTP. If we have a website, we have a host, and this channel is open to us.

The other option is to join a cloud server and upload photos, then link to their URLs.