Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

HTML - My Website...

I keep getting this, every time I try and validate my website, using the validator website that you directed me to:

Error found while checking this document as HTML5! Result: 1 Error, 3 warning(s)

Should I be concerned, at all? - Just wanted to know before I considered publishing my website - Thanks...

Amil

P.S.

Here's the coding that I put in:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vision Central</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Share+Tech+Mono' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <header> <h1> <img class="title" src="img/1362.jpg" alt="Title Photo"> </h1> <nav> <ul> <li><a href="index.html" class="selected">Homepage</a></li> <li><a href="biography.html">Biography</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="everything"> <section> <ul id="homepage"> <li> <a href="img/write.jpg"> <img src="img/write.jpg" alt=""> </a> </li> </ul> </section> </div> <footer> <a href="http://facebook.com/Amil"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://twitter.com/abw2"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p>&copy; 2014 Vision Central.</p> </footer> </div> </body> </html>

2 Answers

Mike Hickman
Mike Hickman
19,817 Points

Hi Amil,

If you scroll down after the validation test it will show you the exact error and warnings. It's saying invalid character in query for the link with your Google Fonts URL. I looked into a bit, and the "|" before the Share Tech Mono code is invalid in HTML 5.

Instead, you have to use the actual unicode that creates that character. Replace "|" with "%7C" in its place, and your code will pass. I found a link with all of the unicode URL replacements in case you need it in the future.

http://www.tutorialspoint.com/html5/html5_url_encoding.htm

Have fun!

-Mike

Amil Boddie-Willis
Amil Boddie-Willis
9,661 Points

It worked - My website has been cleared - Thanks a bunch... P :)

Amil

Hi Amil,

here's a link to another teamtreehouse Forum post on the same subject with a good explanation of why is it happening.

Its all about UTF-8 encoding. Once u swap over | symbol with %7C your code validates just fine with no errors.

all the best Pav