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

Matt Higgins
PLUS
Matt Higgins
Courses Plus Student 886 Points
Posted by Matt Higgins
Matt Higgins
Courses Plus Student 886 Points

I'm not sure what the image tag should be. The image seems to render correctly on the preview. Am I missing a caption?

I'm unsure of what is incorrect. The images display correctly in the preview. Am I missing a caption?

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

3 Answers

Dylan Aresu
Dylan Aresu
9,687 Points

The alt description needs to describe what the picture is concisely as possible. Its only ever used really by blind people using screen readers. When they use a screen reader it will read aloud what is in the alt so the blind person can imagine the image. If you want to stop your images linking to another webpage with just the picture of the image you click on then simply remove the href in the anchors. Here is the correct code.

  <ul>
    <li><img src="numbers-01.jpg"></li>
    <li><img src="numbers-02.jpg"></li>
    <li><img src="numbers-06.jpg"></li>
  </ul>
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi,

the challenge ask you to create ONLY the image tag with the alt attribute blank, so in your code you have only to delete the anchor tag you've created like this:

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

here you can find a great explanation of the image tag

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

You got it, speedy responses. :)

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Matt,

You have wrapped the 'img' tags in links, just remove the links and it will pass:

<!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>