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

HTML How to Make a Website Responsive Web Design and Testing Website Testing

Tim Brown
Tim Brown
6,663 Points

My Index Page is not validating..


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

Matthew Martinusen

You have to url encode the vertical bar |

Replace it with %7C

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

Awesome - thanks Richard, thanks makes perfect sense now!

All the best Tim

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?

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

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?

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.

Hi Anton and Tim,

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

Thanks Jason, working fine now.