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!

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

CSS

Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points
Posted by Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Beginner CSS Syntax issue: can someone help me out please?

</section> <footer> <a href="http://twitter.com/Gunzzzy"><img src="img/twitter-wrap.png" alt="Twitter Logo"</a> <a href="http://facebook.com/TobiGunzyOgunnaike"><img src="img/facebook-wrap.png" alt="Facebook Logo" </a> <p>© 2014 Tobi Ogunnaike.</p> </footer> </div> </body> </html>

Workspaces has highlighted the last four lines in red. Can anyone see why?

3 Answers

Alicia Leslie
Alicia Leslie
4,209 Points
Alicia Leslie
Alicia Leslie
4,209 Points

You have to close your image tags with />

<a href="http://twitter.com/Gunzzzy"> <img src="img/twitter-wrap.png" alt="Twitter Logo" /> </a>

Hope that helps! :)

Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Should I close the img tag with > or /> ?

<footer> <a href="http://twitter.com/Gunzzzy"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/TobiGunzyOgunnaike"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> <p>© 2014 Tobi Ogunnaike.</p> </footer> </div> </body> </html>

Tried both, now the last line is red..

Gloria Dwomoh
Gloria Dwomoh
13,104 Points
Gloria Dwomoh
Gloria Dwomoh
13,104 Points

You haven't close the image tags. I believe closing them will solve the problem :)

Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Should I close the img tag with > or /> ?

<footer> <a href="http://twitter.com/Gunzzzy"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/TobiGunzyOgunnaike"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> <p>© 2014 Tobi Ogunnaike.</p> </footer> </div> </body> </html>

Tried both, now the last line is red..

Gloria Dwomoh
Gloria Dwomoh
13,104 Points

I see you have solved the issue since you have chosen Best Answer, If I am mistaken and you haven't please let me know but i'll need to see your full code if possible as you might be missing some other things.

Edit: Also you don't need slash to close the image tag it is optional, but you do need the ">" you do not need the slash because the image tag is a void element and in HTML5 that is optional.

Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tobi Ogunnaike | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css"
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Tobi Ogunnaike</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>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/ronaldinho joga bonito.jpg">
            <img src="img/ronaldinho joga bonito.jpg" alt="">
            <p>Joga Bonito </p>  
            </a>
          </li>
          <li>
            <a href="img/lonely keeper.jpg">
            <img src="img/lonely keeper.jpg" alt="">
            <p>The keeper is off his line! </p>  
            </a>
          </li>
          <li>
            <a href="img/champions league.jpg">
            <img src="img/champions league.jpg" alt="">
            <p>Champions league </p>  
            </a>
          </li>
        </ul>
      </section>
        <footer>
          <a href="http://twitter.com/Gunzzzy"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href="http://facebook.com/TobiGunzyOgunnaike"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> 
          <p>&copy; 2014 Tobi Ogunnaike.</p>
        </footer>
     </div>
  </body>
</html>

I haven't solved the issue yet. Thanks for the help

Gloria Dwomoh
Gloria Dwomoh
13,104 Points

There is a small error in your head tag. I have added a comment in this snippet and corrected it. You are missing an ">" at the last link. 

 <head>
    <meta charset="utf-8">
    <title>Tobi Ogunnaike | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    /* below you were missing an ">"*/
    <link rel="stylesheet" href="css/main.css"> 
  </head>
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Awesome, that worked. Thanks :)

Gloria Dwomoh
Gloria Dwomoh
13,104 Points

You are welcome :)

Alicia Leslie
Alicia Leslie
4,209 Points
Alicia Leslie
Alicia Leslie
4,209 Points

You don't have to close image tags with /> for HTML5 BUT...

There are couple of special characters in html that close with />, such as br and hr

the / is required for XHTML and XML, so some can read the <img> without the /, but it is safe to use the / for good practice since both HTML5 and XHTML can read it.

MDN is a very reliable source for questions such as these https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img