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

Posted by Nehemiah Miggiani
Nehemiah Miggiani
1,321 Points

Checking Html

when I try to check my website on http://validator.w3.org i have a couple of problems that I can't fix. Here is what I did.

<!DOCTYPE html> <html> <head> <meta charset="ut-8"> <title>Nehemiah Miggiani | 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/reponsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nehemiah Miggiani</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">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 id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create and 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shpaes using repetition.</p> </a> </li> </ul> </section>

  <footer>
     <a href ="http://twitter.com"> <img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
     <a href ="http://facebook.com.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
     <p>&copy; 2014 Nehemiah Miggiani.</p>
  </footer>
</div>

</body> </html>

6 Answers

Mikael Enarsson
Mikael Enarsson
7,056 Points
Mikael Enarsson
Mikael Enarsson
7,056 Points

The first error is because of the "|" in the url for the fonts. You can solve this by using the escape sequence %7C

The second error is because you have a straying div at the end.

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

Hi Nehemiah,

Mikael has the perfect fix for the googleapis error. Just place that "%7C" in place of the "|" marks and that will be fixed.

Also, you have "ut-8" instead of "utf-8" in line 2.

If you go back to the validation page and scroll all the way down it shows you exactly which errors and warnings it wants you to take a look at. Play around until the errors validate, then you can move on to the warnings if you'd like.

Good luck!

Mike

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

You also don't have your body opening and closing tags, or a closing html tag.

Try playing with it on your own and just keep re-validating after you tweak some code, but here is passing with just the warnings left:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Nehemiah Miggiani | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>      
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reponsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<header>
 <a href="index.html" id="logo">
  <h1>Nehemiah Miggiani</h1>
  <h2>Designer</h2>
 </a>
 <nav>
   <ul>
     <li><a href="index.html" class="selected">Portfolio</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
   </ul>
  </nav> 
</header>

  <section>
   <ul id="gallery">
    <li>
     <a href="img/numbers-01.jpg">
       <img src="img/numbers-01.jpg" alt="">
       <p>Experimentation with color and texture.</p>
      </a>
    </li>
    <li>
     <a href="img/numbers-02.jpg">
       <img src="img/numbers-02.jpg" alt="">
       <p>Playing with blending modes in Photoshop.</p>
      </a>
    </li>
     <li>
     <a href="img/numbers-06.jpg">
       <img src="img/numbers-06.jpg" alt="">
       <p>Trying to create and 80's style of glows.</p>
      </a>
    </li>
     <li>
     <a href="img/numbers-09.jpg">
       <img src="img/numbers-09.jpg" alt="">
       <p>Drips created using Photoshop brushes.</p>
      </a>
    </li>
     <li>
     <a href="img/numbers-12.jpg">
       <img src="img/numbers-12.jpg" alt="">
       <p>Creating shpaes using repetition.</p>
      </a>
    </li>
   </ul>
  </section>

  <footer>
     <a href ="http://twitter.com"> <img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
     <a href ="http://facebook.com.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
     <p>&#169; 2014 Nehemiah Miggiani.</p>
  </footer>
</body>
</html>
Nehemiah Miggiani
Nehemiah Miggiani
1,321 Points
Nehemiah Miggiani
Nehemiah Miggiani
1,321 Points

Thanks guys that was great help saved a lot of time!!

nl9
nl9
1,478 Points
nl9
nl9
1,478 Points

Can anyone Tell me why %7C woke but | didn't??.

nl9
nl9
1,478 Points
nl9
nl9
1,478 Points

i meant worked, not woke. i can't figure out why | doesn't pass but %7C does...

Mike Hickman
Mike Hickman
19,817 Points

Hi Nosson,

I don't know the exact details, but it basically has to do with an HTML standard and URL encoding. Data/code in URLs has it's own requirements.

The %7C is code which says "Hey, I want you to show the "|" symbol while processing this code.

Check out some info and a list of tons of symbols here. It's weird, but we gotta do it.

http://www.w3schools.com/tags/ref_urlencode.asp

Good luck! -Mike