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

Amsale Gessesse
Amsale Gessesse
419 Points
Posted by Amsale Gessesse
Amsale Gessesse
419 Points

How do I add an image tag?

<ul> <li>"numbers-01.jpg",</li> <li>"numbers-02.jpg",</li> <li>"numbers-06.jpg",</li> </ul>

2 Answers

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

In this instance, you need to surround the image to be inserted with the img tag. For example:

<li><img src="numbers-01.jpg" alt="Image Description"></li>

This is assuming that the image "numbers-01.jpg" resides within the same directory as the HTML file. If the image resides in a different folder than the html file, for instance a folder named "images" you would need to specify this within the src attribute like so

<img src="images/numbers-01.jpg" alt="Image Description">

Where the path is relative to the html file in question. Also the alt attribute is nice to have, but not required. The img tag is self closing, so you don't need to add </img> or any sort of closing tag.

Here is some additional useful information on the img tag if you want an additional reference.

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

You add image tag like this. "src" is the source of your image, alt is the alternate text.Just remember image tage is self closing.

<img src="" alt="">

You can look at my code for further details

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