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 Website Testing

Tim Brown
Tim Brown
6,663 Points
Posted by Tim Brown
Tim Brown
6,663 Points

My Index Page is not validating..

Hi

I am running through the testing of my index page on the w3c validator site.

I have the exact same html on my page as Nick, well - i believe I do ;)

The validator is showing up an error - connected with the google fonts code that I pasted in earlier in this series of videos.

The error says:

Error Line 7, Column 142: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800 for attribute href on element link: Illegal character in query: not a URL code point.

…ne|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

Syntax of IRI reference:
    Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

It seems to be pointing to the closing > after the link reference that I copied directly from google fonts.

Any ideas on what I have got wrong here please?

Cheers! Tim

5 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Matthew Martinusen

You have to url encode the vertical bar |

Replace it with %7C

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

It's referring to encoding of the URL path in the Google font. If you look at the example, effectively the response is saying that special characters such as the hashtag before canvas (#canvas) should be escaped.

In your URL for the Google font there exist special characters such as + which should be encoded to pass validation. + becomes %2B. You can find a full listing here http://www.w3schools.com/tags/ref_urlencode.asp

Tim Brown
Tim Brown
6,663 Points
Tim Brown
Tim Brown
6,663 Points

Awesome - thanks Richard, thanks makes perfect sense now!

All the best Tim

Matthew Martinusen
Matthew Martinusen
5,216 Points
Matthew Martinusen
Matthew Martinusen
5,216 Points

I am still having problems with mine. It is highlighting the closing >. I have tried multiple different things to fix it but it will not accept what I am entering. Can anybody help with this?

Tim Imasa
Tim Imasa
8,816 Points

Replace the | between Changa+One and Open+Sans to %2B.

Anton Voltchok
Anton Voltchok
2,016 Points
Anton Voltchok
Anton Voltchok
2,016 Points

Hi Tim,

Quick question, I used the %2B and it validated, but the problem is now the google font doesn't work on the web page, any ideas how to fix that AND have it validate?

Tim Imasa
Tim Imasa
8,816 Points

Yeah, I received the same issue. Basically, after I passed the activity, I put the pipe back in order for the font to work. Not really sure how to explain that though.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Anton and Tim,

I posted in my answer the correct url encoding for the vertical bar. It's %7C

Anton Voltchok
Anton Voltchok
2,016 Points

Thanks Jason, working fine now.