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 Social Media Links

jeremy hudson
jeremy hudson
2,589 Points
Posted by jeremy hudson
jeremy hudson
2,589 Points

so ive been building links like a thousand times with pictures and some how its not showing the picture or the link.

when ever I'm on my work space when I put the codes for the images they will be broken images and If I try the links, they wont link why is that. I had a good web page going for me and now its nothing but broken images and broken links I'm starting to think theres some error going on my work space and I don't know what to do

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <img src="img/numbers-01.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-06.jpg" alt="">
        </li>
      </ul>
    </section>
    <footer>
      <img src="img/facebook-wrap.png" alt="facebook logo"> <a href="http://facebook.com/jeremyhudson365@gmail.com"></a>
      <img src="img/twitter-wrap.png" alt="twitter logo"><a href="http://twitter.com/jeremyhudson365@gmail.com"></a>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Charles Lockhart
Charles Lockhart
5,732 Points
Charles Lockhart
Charles Lockhart
5,732 Points

You are missing the anchor element for each image I believe. For example, within the <li> element, use <a href="img/numbers-01.jpg"> and then close the anchor element with </a>.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The anchor element is not necessary to display the image. That will make it a link.

3 Answers

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

Hi Jeremy,

You seem to be missing the link altogether. Remember to add your reference anchor tags first, then place the image code inside of that. Once you do this, your image will be linked to the path you specify in the "a href" line...which in this case is directly to the image itself.

<li>
  <a href="img/numbers-01.jpg">               <!-- Your path to go to when the image is clicked -->
    <img src="img/numbers-01.jpg" alt="">     <!-- Show the image on your page -->
  </a>
</li>

Cheers, Mike

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You probably need to add the anchor to pass the test, but not to display an image. There are some common issues that occur early with students:

A file structure error like not having the index.http file in the same file as the img folder.

Not matching names exactly, including the case of the name.

Not having uploaded the pictures successfully.

Krishnendu Banerjee
Krishnendu Banerjee
1,005 Points
Krishnendu Banerjee
Krishnendu Banerjee
1,005 Points

To make it realy simple for you put the img src tag in between their respective anchor tags