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
May Lye
10,505 PointsHTML validation problem...1 Error, 3 warnings... Error Line 7, Column 140: Bad value
Validation Output: 1 Error
Error Line 7, Column 140: 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 URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Warning Line 27, Column 12: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section>
4 Answers
Rich Bagley
25,869 PointsHi,
I think it will be the '|' in the URL (just before 'Open+Sans'). Try escaping it using %7C in it's place.
Hope that helps
-Rich
David Perkins
9,607 Pointsi thought the same, but if you replicate the same font collection, it seems to have been included correctly?
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
Rich Bagley
25,869 PointsHi David,
Based on my answer, in the HTML the link would become:
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
Note the | has been replaced with %7C. Hopefully that helps.
-Rich
Colin Bell
29,679 PointsRich, that's correct. This seems to be a common question. Encoding the bar character does indeed rectify the validation error.
Rich Bagley
25,869 PointsThanks for confirming Colin :)
David Perkins
9,607 PointsCan you post your code this error is in relation to?
May Lye
10,505 Pointsthanks for all your kind help....i will try it later as i m struggling with my web hosting now....
Rich Bagley
25,869 PointsNo problem. Hope you get it sorted :)
Igor Kavalar
1,077 PointsI have same problem. I did pass the validation by using recommended code above %7C, and adding h3 tag under my section on index page. However I wonder now what should I use, correct code from google fonts, and nick pettit no h tags under section, or using validator recommendations on my pages?
Colin Bell
29,679 PointsIt doesn't matter. If you like not seeing errors when validating, go for the %7. If you'd prefer to use the direct link from Google, that's fine too. The only thing that really matters is that your fonts are showing up on your page - there aren't any performance issues or anything associated with this. Just a matter of personal preference.
As for the section headings, the w3 says every section should have an identifier of some sort (typically an h1-h6 tag):
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
So if you want to be semantically correct, go ahead and add some sort of heading that explains what the section is about.
jasonjones5
Courses Plus Student 5,571 Pointsjasonjones5
Courses Plus Student 5,571 PointsI couldn't get the google font URL's to validate either. Not sure how they did it in the vid.