What is the differences btw <...href... and <...src...>?

Answer 1

SRC isn't isolated to images. For example, think about <script> tag for JS, it also uses src.

SRC is used to load resources into the page and HREF is used to link to a resource external for the page. As such, when you use src it's taking place during that loading phase, which is why we often place our JS scripts at the bottom or inside of the ready so it'll only load once everything else is done loading. As for HREF, the page continues to do its thing and doesn't wait for the HREF to download its resource.

Answer 2

@Netkos Ent has it.

Questions like this just make me go digging. Because I didn't have this straight myself (and I may have made an error), I intend this only to add on to @Netkos Ent's shorter, faster answer.

Up to HTML 4 [1]
'src' is used when the resource REPLACES the element.
Replaced elements [2] [3] are independent of the CSS formatting model
Replaced elements are fetched immediately and pause parsing

'href' establishes a relationship between the document and external resource.
They do NOT pause parsing (may pause rendering).

Also noted: same consideration for css link= and @import

In HTML5:
<script> can now take "async" and "deferred" attributes*
[link 1] links to the answer directly below it, which explains them.

[1] https://stackoverflow.com/a/7794936/3981745
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
[3] https://www.sitepoint.com/replaced-elements-html-myths-realities/

* I knew about this, but I really didn't think it mattered until just now.

Answer 3

thank you

Answer 4

@Kirk Thanks for adding onto it all bro! Nicely done as well.