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

Ylva Bordsenius
Ylva Bordsenius
1,658 Points
Posted by Ylva Bordsenius
Ylva Bordsenius
1,658 Points

I have completely forgotten! How do you make an image tag?

img scr=.... <img scr>=...>/img scr> ?

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

4 Answers

Kireeti K
Kireeti K
9,675 Points
Kireeti K
Kireeti K
9,675 Points

Hello Ylva Bordsenius, The correct syntax for Image tag is as follows.

<img src="abc.jpg">

Remember Img tag is self closing and dont need a "</img> to close it. *** Most used attribute with image tag are alt="Alternative Text when Img is not displayed" height="100" width="100"

Jenny Veens
Jenny Veens
10,896 Points
Jenny Veens
Jenny Veens
10,896 Points

You're close! You just need to close your opening '<a> tag and then close the '<img>' tag. Unless the numbers are purely decorative, it's a good idea to include an alt attribute to make your images more accessible. 

<ul>
        <li><a><img scr="numbers-01.jpg" alt="Number 1"></a>
        <li><a><img scr="numbers-02.jpg" alt="Number 2"></a>
        <li><a><img scr="numbers-06.jpg" alt="Number 6"></a>
</ul>

If you're ever unsure about something html syntax, a quick Google search can usually give some good results. https://www.google.ca/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=html+img+tag

klaudiarozgonyiova
klaudiarozgonyiova
10,711 Points

Hey Jenny, can I ask you something?

How do you create that window with code example? :) I've been trying to figure that out since I joined...

klaudiarozgonyiova
klaudiarozgonyiova
10,711 Points
klaudiarozgonyiova
klaudiarozgonyiova
10,711 Points

Hi, you closed the img tag in the wrong place . It should look like this:

<li><img scr="numbers-01.jpg"> </li>

And if you want to turn image into a link it should look like this:

<li> <a href="#"><img src="numbers-01.jpg"></a></li>

Jenny Veens
Jenny Veens
10,896 Points
Jenny Veens
Jenny Veens
10,896 Points

Hi Klaudiarozgonyiova,

You can add code samples to your answers but opening a block with 3 backticks( ``` ) and the language you want to highlight, then closing it with 3 backticks.

There is a link under the comment text area titled Markdown Cheatsheet - all the into is there.

klaudiarozgonyiova
klaudiarozgonyiova
10,711 Points
klaudiarozgonyiova
klaudiarozgonyiova
10,711 Points

Thank you! I tried to open it but I opened it on a new tab and therefore nothing happened :) But now I know, thanks again for your help