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 Susan Dubickas
Susan Dubickas
828 Points

Tutorial not recognizing existing alt tag.

The alt tag exists for the twitter img line. But the tutorial says it's not there. How do I get the tutorial to recognize it?

I copy/pasted the facebook line and change the png name from 'facebook' to 'twitter'. When that didn't work, I re-entered the alt tag but that didn't work either. The two lines are identical except for 'twitter' versus 'facebook'. Unfortunately, this question page won't let me include a screenshot.

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="">
      <img src="img/twitter-wrap.png" alt="">
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Vibhor Thakral
Vibhor Thakral
1,498 Points

Try adding some content in your alt, like alt="#"/ alt="comment", since the challenge is specifically asking you to write something in the alt property. Hope it helps :)

6 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Susan,

If you add some text in to the blank alt tags it should allow you to progress, e.g.

      <img src="img/facebook-wrap.png" alt="Facebook Icon">
      <img src="img/twitter-wrap.png" alt="Twitter Icon">

Hope that helps :)

-Rich

Susan Dubickas
Susan Dubickas
828 Points
Susan Dubickas
Susan Dubickas
828 Points

For this part of the tutorial, I'm supposed to leave the alt tag blank. However, entering text in the tag still gives the same error - the tag is not being recognized by the tutorial.

It was a good option to try. Wish it had worked.

Thanks anyway! Susan

Rich Bagley
Rich Bagley
25,869 Points

Hi Susan,

Challenge 1 of 2 reads:

Inside the <footer> element, add the images facebook-wrap.png and twitter-wrap.png from inside the img folder. Be sure to include an appropriate alternate attribute for each. Don’t link them yet.

-Rich

Susan Dubickas
Susan Dubickas
828 Points
Susan Dubickas
Susan Dubickas
828 Points

Tried that - didn't work.

Thanks anyway! Susan

Rich Bagley
Rich Bagley
25,869 Points

Hi Susan,

This is the full code for stage 1 of 2:

<!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 Icon">
      <img src="img/twitter-wrap.png" alt="Twitter Icon">
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

When I add this and click submit it returns Well done! You're doing great!

-Rich

Susan Dubickas
Susan Dubickas
828 Points
Susan Dubickas
Susan Dubickas
828 Points

I initially tried without the links but that also resulted in the same error. This is my original code:

<footer>
  <img src="img/facebook-wrap.png" alt="">
  <img src="img/twitter-wrap.png" alt="">
  <p>&copy; 2013 Nick Pettit.</p>
</footer>

</body>

If there is no error with the facebook line, why is there an error with the twitter line? Susan

Rich Bagley
Rich Bagley
25,869 Points

Hi Susan,

You need to add something in to both alt tags. The challenge reads:

Inside the element, add the images facebook-wrap.png and twitter-wrap.png from inside the img folder. Be sure to include an appropriate alternate attribute for each. Don’t link them yet.

I've included the full code in the previous comment which allowed me to progress first time.

Hopefully that helps.

-Rich

Susan Dubickas
Susan Dubickas
828 Points
Susan Dubickas
Susan Dubickas
828 Points

Your code is one step beyond where I'm at. I've not gotten to the point where any text is supposed to be added to the alt tag (I've not been provided that text until your response).

When I ignore the current instruction set and add text to both the facebook and twitter alt tags, I get the success message. Note: When I added text to just the twitter alt tag, I still got the same error message. Something funky here.

But at least I can now continue.

Thanks! Susan

Rich Bagley
Rich Bagley
25,869 Points

Odd as the step I was on was 1 of 2. Glad you got it sorted anyway.

-Rich

Susan Dubickas
Susan Dubickas
828 Points
Susan Dubickas
Susan Dubickas
828 Points

Yea. Also odd that I needed to have text in both alt tags to remove the error with the twitter alt tag.