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

Posted by Trinity Scott-Hinkle
Trinity Scott-Hinkle
721 Points

How do you properly wrap a link to an image? I had both <a href="" alt=""> sections at the top, and at first it worked.

Not sure what happened, it worked, until I needed to cut and paste a section of code. I still can't use my mouse to highlight anything. At this point, I'm not sure 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>
      <a href="http://twitter.com"></a>
      <img src="img/facebook-wrap.png" alt="Facebook Logo">
      <a href="http://twitter.com> </a>
      <img src="img/twitter-wrap.png" alt="Twitter Logo">
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Cody Te Awa is probably giving you the right answer and I'll add a bit more to that.

<a> element has no 'alt' attribute. What <a> does is it creates a link from your website to other URL. So when clicked it can lead to that particular resource whether it's a site or image or anything that is valid URL.

<img> is responsible for getting image on your website and it does it by using "src" attribute which is special and mandatory for <img> attribute. "alt" attribute is fallback for corrupted image link and screen readers. It displays message you wrote when image is not available or read by screen reader. Thus, it is very important to include one.

Cody Te Awa
Cody Te Awa
8,820 Points
Cody Te Awa
Cody Te Awa
8,820 Points

Not exactly sure what the question is but hope that helps!

 <li>
      <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
      </a>
</li>