Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by giorgi mesturmanidze
giorgi mesturmanidze
Courses Plus Student 1,356 Points

difference between SRC and HREF ?

i found this topic, http://stackoverflow.com/questions/3395359/difference-between-src-and-href but i cant understand, can someone explain more simply? i am just starter in html. thanks :)

2 Answers

Luke Glazebrook
Luke Glazebrook
13,564 Points
Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Giorgi!

That answer contains far more information than you currently need to know so don't get too wound up with all of the detail. What you should be focusing on for now is trying to get used to which elements use src and which use href.

HREF - Hyperlink Reference | Often used in tags to reference another page or web link.

SRC - Source | Often used in tags to give the web page the source of an image, video or file.

Christopher Warren
Christopher Warren
17,640 Points
Christopher Warren
Christopher Warren
17,640 Points

Here is an excerpt from stack overflow.

"We use src for 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 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 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 </body> tag)" - http://stackoverflow.com/questions/3395359/difference-between-src-and-href