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 Organize with Unordered Lists

Posted by linseyfadiga
linseyfadiga
404 Points

I cant add the image tag in the html

I did what was asked but I keeps saying it is wrong. Can someone please tell me what I am doing wrong? I have tried to redo it a couple of times.

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> 
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt=""> 
          </a>
        </li>
            <li>  
              <a href="img/numbers-02.jpg"> 
                <img src="img/numbers-02.jpg">
              </a>
           </li>
                <li>   
                  <a href="img/numbers-06.jpg">
                    <img src="img/number-06.jpg">
                  </a>
              </li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

4 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

The challenge says:

"Inside the three new list items, add the following images: "numbers-01.jpg", "numbers-02.jpg", and "numbers-06.jpg". Leave the alt attributes blank, and don’t add any captions or links. Just the images!**

Remember, you can preview your work by clicking the Preview button."

Remove your <a></a> and you should pass the challenge

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The instructions for task 2 say "Leave the alt attributes blank, and don’t add any captions or links. Just the images!"

But the code here has each image wrapped in a link. Those should not be there.

Also, the name shown for the final image is "number-06" (singular) instead of "numbers-06" (plural).

You're also missing two of the "alt" attributes, but this particular challenge doesn't count that against you.

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi There!

Firstly, you are missing the alt tag for the second and third image.

Next, challenges are very specific when it comes to the instructions, and I think you may have missed the part where the instructions state:

Leave the alt attributes blank, and don’t add any captions or links. Just the images!

Your images are inside links. Remember, instruction need to be followed exactly or the challenge will fail even if the code works outside of the challenge.
Here, there should only be an <img> tag inside of the <li> tags (3 lines of HTML).

Once you add the missing empty alt attributes and remove the links, the rest of the HTML looks good! :thumbsup:

Good job! :) :dizzy:

fodhil zidane
fodhil zidane
24,020 Points
fodhil zidane
fodhil zidane
24,020 Points

In the section element, we can add the img tag like this: <section> <ul> <li><img src="numbers-01.jpg" alt=""></li> <li><img src="numbers-02.jpg" alt=""></li> <li><img src="numbers-06.jpg" alt=""></li> </ul> </section>