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

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

barnabasadedoyin
barnabasadedoyin
1,501 Points

HTML 5 glitch testing

I just validated my code and it wasn't validated. Here is what w3 validator says:

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

…ga+One|Open+Sans:400,400italic,700,700italic' 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.

Line 27, Column 25: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

  <section id="main">

How can I solve this? I've tried but it keeps giving me these glitch.

2 Answers

Hi barnabasadedoyin,

The vertical bar | that appears in the google fonts url is considered an unsafe character and needs to be url encoded.

You can replace all occurences of it with %7C

You can ignore the warning about "section lacks heading" It's telling you that normally a section would have a heading to describe what that section is. In this case, you don't have one. It's not an absolute requirement.

barnabasadedoyin
barnabasadedoyin
1,501 Points

Thank you Jason, it works and my HTML5 is now validated...hooray! Question, is it always that one change the vertical pipes to %7C?

You're welcome. Yes , for google fonts url's you only need to encode the vertical pipe. You'll have to keep doing this unless google updates the code they give where it's already encoded.

Depending on how many fonts you selected you might even have more than 1 vertical pipe so you'll want to make sure you encode all of them.

barnabasadedoyin
barnabasadedoyin
1,501 Points

Thank you very much, well taken!

Regards