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

Daniel Haasenritter
PLUS
Daniel Haasenritter
Courses Plus Student 3,463 Points
Posted by Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points

I still keep getting error messages and I can't figure out why. I've been stuck on this for a couple of days.

The message I am getting is "make sure you include an image tag that displays "numbers-01.jpg". Not sure why I am getting the message. The images appear to be included when I preview them.

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

5 Answers

Rajashree Madan
Rajashree Madan
13,293 Points
Rajashree Madan
Rajashree Madan
13,293 Points

Sorry to hear that, Daniel.

Here's the code that worked for me -

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

In the first step, I added 3 empty unordered list items. And for the second step, I added in just the image tags with the 'src' attribute and an empty 'alt' attribute and nothing else.

Hope this helps.

Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points
Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points

Thank you. I'm looking at your answer and, like Benjamin, you have added a / after the quotes. Was that in the instructions? Did I miss that?

alt='' '' /></li>

Rajashree Madan
Rajashree Madan
13,293 Points
Rajashree Madan
Rajashree Madan
13,293 Points

No, you did not miss anything. An ending slash for self-closing tags like <img> and <br> was required in older HTML versions and for me, it's just been a hard habit to break. Your code is still valid without it.

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

^What she said.

I haven't even tried to break the habit as I find the syntax more readable and visually appealing; for some reason I find it dreadfully disconcerting to leave it off. As Rahashree mentioned, it's considered valid HTML5 with our without the trailing slash ('/'), as HTML5 parsers will simply ignore it. The trailing slash is still required for valid XHTML markup, but you'll rarely, if ever, encounter that.

Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points
Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points

Thank you, that was it. I reviewed where I went wrong and with your visual aid, I got it. Thanks to you as well Ben.

Rajashree Madan
Rajashree Madan
13,293 Points
Rajashree Madan
Rajashree Madan
13,293 Points

The same thing happened to me and it was because I was using anchor tags around the image tags. The code challenge states, "Leave the alt attributes blank, and don’t add any captions or links. Just the images!". So try taking out the link tags and just leave in the image tags. Hopefully, it should work.

I just noticed that you haven't actually closed the link tag after the image tag. So maybe add the closing tag first and see if that works.

Good luck!

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Yep- get rid of the <a> tags as well as the <p> tags. The <p> tags don't actually make the challenge fail but they aren't really supposed to be added.

Daniel Haasenritter
PLUS
Daniel Haasenritter
Courses Plus Student 3,463 Points
Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points

Okay, I tried it. At first I thought I had made progress but no, I had just been sent back to the first stage of the problem. Could you possibly show me the exact line of code you used?

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Here's an example for the first list item.

        <li><img src="numbers-01.jpg" alt=""/></li>
Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points
Daniel Haasenritter
Daniel Haasenritter
Courses Plus Student 3,463 Points

Okay, thanks. I'm noticing another forward slash after the quotes. That wasn't included in the instructional video was it?