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 Andrew Sapienza
Andrew Sapienza
3,582 Points

I am having an issue understanding where to include my image tag.

I believe I have added this code in correctly, but I continue to receive an error message.

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

2 Answers

Joel Hernandez
seal-mask
.a{fill-rule:evenodd;}techdegree
Joel Hernandez
Front End Web Development Techdegree Student 2,571 Points
Joel Hernandez
.a{fill-rule:evenodd;}techdegree
Joel Hernandez
Front End Web Development Techdegree Student 2,571 Points

You currently are using an anchor element, which will create a link to the images. To source the images you want to use the img element. Code should look like this.

<img src="img/numbers-01.jpg" alt="">
Andrew Sapienza
Andrew Sapienza
3,582 Points

That fixes it. Thank you!

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Joel beat me to the answer :)

Andrew make sure you vote his answer as "Best".

Regards.

nWEBd

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Andrew.

The problem with your code is that you are trying to create a "<a></a>" which is an Anchor a.k.a. Link tag but the challange wants you to add an <img /> tag.

Just to clear up: you add images to links like this:

 <a href="takemethere.html"><img src="whereTheImgIsStored.jpg" /></a>

The "img" tag is self closing...

Here's the whole code for the challange (read through it and try to remember for future projects - assignments):

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

Hope this helped.

Happy Coding!!!

nWEBd

Andrew Sapienza
Andrew Sapienza
3,582 Points

Thank you for being so thorough with your response. You guys are incredible!