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 How to Make a Website Creating HTML Content Add Image Gallery Content

Scott Prueter
Scott Prueter
1,117 Points
Posted by Scott Prueter
Scott Prueter
1,117 Points

href vs src

for this line of code:

<ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt="description"> <p>Experimentation with color and texture.</p> </a> </li> </ul>

Why do we need to have a hyperlink reference (href) AND a source (src)?

2 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Scott,

The href is used in the anchor tag for a direct link to the image location in a separate window/tab whereas the src used in the image tag is for displaying the image directly on the page.

Thanks

-Rich

Scott Prueter
Scott Prueter
1,117 Points
Scott Prueter
Scott Prueter
1,117 Points

Thanks that makes sense. So do you HAVE to have the href in order for the image to be displayed on the site, or is the href simply for the benefit of the individual browsing the site page?

Thank you for your wisdom.

Rich Bagley
Rich Bagley
25,869 Points

Hi Scott,

No problem. You don't have to include the anchor (link) tag at all if you don't want to link to the image. If you simply wanted to display the image on the page without a link your code would look something like this:

    <li>
        <img src="img/numbers-01.jpg" alt="description">
        <p>Experimentation with color and texture.</p>
    </li>

The above only contains the image tag and the src is used to display this directly on the page.

Hope that helps.

-Rich

Kim Cowart
Kim Cowart
32,918 Points
Kim Cowart
Kim Cowart
32,918 Points

Hey Scott,

The paths, if I understand your question, may seem redundant at a glance but it's because the a tag and the img tag are telling the browser different things about that same path. a tag is saying 'this is a link' and img tag saying 'this is where the image can be found.

Hope that helps.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

A tag you mean href ( i believe),
And a img you mean src ( i believe ) : p

Kim Cowart
Kim Cowart
32,918 Points

Obviously I didn't write that well but no, I meant tags. href and src are the attributes associated with the respective tags. I was just trying to convey that they each have different jobs in the 'eyes' of the browser.

:-)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

xd it seem a lil messy at the bottom but well, i didn't see the img 'tag' xd .

I just pointed that :

  • Image tas is = src

and

  • Link tag is = href

:smiley: