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 Responsive Web Design and Testing Build a Three Column Layout

B D
B D
2,703 Points
Posted by B D
B D
2,703 Points

Can't figure out what's wrong with my html: bottom tags are red

At the bottom of my contact.html page in workspaces, the following are highlighted red indicating that there's an error:

</footer>
    </div>
  </body>
</html>

I'll bet it's something simple, but I can't find it. Here's all of my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">    
  </head>
  <body>
    <header>
      <a href="index.html" id=logo>
        <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" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">        
        <h3>General Information</h3>
        <p>I am currently not looking for design work.</p>
        <p>Please only use phone from emergencies.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:123-456-7890">123-456-7890</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>  
      </section>
      <footer>
        <a href="www.twitter.com"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"</a>
        <a href="www.facebook.com"><img src="img/facebook-wrap.png" alt="twitter logo" class="social-icon"</a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

Any idea? Thanks in advance!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi B D,

Consider putting your code in a code block where you wrap it with 3 backticks. It's hard to read like this.

This should help: https://teamtreehouse.com/forum/posting-code-to-the-forum

Also, if you do decide to edit your question and make a code block then leave a comment here saying you've done so. We don't receive notifications when posts are edited but we will receive a notification for the new comment you leave.

B D
B D
2,703 Points
B D
B D
2,703 Points

Thanks Jason! My question has been answered, but just for good measure I corrected the formatting. Thanks for the link!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

I wanted to point out too that even the syntax highlighting that happens in the code block can help you find your error..

Now that you know it's the social images if you take a look at your closing </a> for your social links in your code block above you'll see that it's colored in both red and green indicating some type of error.

Also, you don't have quotes around your logo id id=logo should be id="logo"

it's not considered an error in html5 to leave quotes off attributes but sometimes it's required and it's considered good practice to do so.

3 Answers

Ojong Obasi
Ojong Obasi
6,561 Points
Ojong Obasi
Ojong Obasi
6,561 Points

I think ur problem is a couple of unclosed tags example from ur code : <a href="www.facebook.com"><img src="img/facebook-wrap.png" alt="twitter logo" class="social-icon"</a>

// The image tag is still open <img src="img/facebook-wrap.png" alt="twitter logo" class="social-icon"

Ojong Obasi
Ojong Obasi
6,561 Points
Ojong Obasi
Ojong Obasi
6,561 Points

Seems to me <footer> tag isn't suppose to be child element of the <div> tag...!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ojong,

You might have the correct answer here but presumably your html has been stripped out. You can wrap inline code with a single backtick `

B D
B D
2,703 Points
B D
B D
2,703 Points

You got it Ojong. Thanks a million! And thanks for bearing with the incorrect formatting!