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

Candido Romano
seal-mask
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points
Posted by Candido Romano
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points

W3C Validator Service: error relating Google font and section. Here is my code

Same as other users, I received two errors in W3C Validator Service about my Html:

1) Error Line 7, Column 146: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400 %7C Changa+One for attribute href on element link: Illegal character in query: not a URL code point. …0italic,700italic,700,800,400 %7C Changa+One' 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.

2) Warning Line 27, Column 13: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section>

What's wrong with my code?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>Candido Romano | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400 %7C Changa+One' 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>
    <header>
      <a href="index.html" id="logo">
     <h1>Candido Romano</h1>
      <h2>Journalis and Storyteller</h2>
      </a>
      <nav>
       <ul>
         <li><a href="index.html" class="selected">Portfolio</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header> 
    <div id="wrapper">
    <section>
      <ul id="gallery">
        <li>
          <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture</p>
            </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
           <img src="img/numbers-02.jpg" alt="">
           <p>Playing with blending mode in Photoshop</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
           <img src="img/numbers-06.jpg" alt="">
           <p>Trying to create an 80's style of glows</p>
          </a>
        </li>
         <li>
          <a href="img/numbers-09.jpg">
           <img src="img/numbers-09.jpg" alt="">
           <p>Drips created using Photoshop brushes</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg" alt="">
           <p>Creating Shapes using repetition</p>
          </a>
        </li>
      </ul>
     </section>
  <footer>
    <a href="http://twitter.com/CandidoRomano"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
     <a href="http://facebook.com/Candido83"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; Candido Romano.</p>
    </footer> 
      </div>
  </body>
</html>

5 Answers

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

I answered similar question just a few minutes ago XD Try these changes and let me know if it works. I will re-paste my answer.

Why do you leave white-spaces before the %7C? If that white-space is really needed try putting %20 in its position for example. 

  <link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic%20%7COpen+Sans:400italic,700italic,800italic,400,700%20%7CChanga+One:400,400italic' rel='stylesheet' type='text/css'>

Also for the other error add a heading to your section or change

<section></section> to <div></div>

If you still have problems after this, let us know :)

Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points
Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points

Hi Gloria, would you pls. tell me how to use a markdown to share the Google font example as you post it here? I cannot make it work...I paste it here in the forum using html and the ''' but it doesn't show...

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Sebastian Angelo-Perez - Hi, sorry for replying too late I saw it just now. You can tag people by using @ and their username you'll see a drop down appear and select the person you are looking for, it works kind of like the LinkedIn tagging if you have tried it before.

For the markdown you need three of this ` . You can find it above the tab key in a normal keyboard. Check the video on the left under "Tips for asking questions" and also :

How-to Guide: Markdown within Posts.

Aaron Watson
Aaron Watson
2,551 Points
Aaron Watson
Aaron Watson
2,551 Points

I have tried your code in the validator and it doesn't work like you say. However if I replace the code with my own selections for 'Changa One' it works fine.

your code:

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400 %7C Changa+One' rel='stylesheet' type='text/css'>

It looks like you have more than one font selected to import into your page with 'Changa One' and Open+Sans at the beginning and the validator doesn't like it. Maybe someone can elaborate on this?

my working code:

<link href='http://fonts.googleapis.com/css?family=Changa+One:400italic,400,700,800' rel='stylesheet' type='text/css'>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Candido,

I would suggest you copy and paste the code for a different font from Google fonts and see how that goes, just to find out if it's an error with the code from Google for that particular font. The error about section heading is nothing to worry about. It's simply telling you that you have no heading for your gallery section. You have it in your header, if that's how you want to display it then that's up to you.

Candido Romano
seal-mask
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points
Candido Romano
.a{fill-rule:evenodd;}techdegree
Candido Romano
Front End Web Development Techdegree Student 1,873 Points

Thank you all guys

Gloria: I did just like your advice and finally I have no error in the validator.

But I don't know if I really understand the "700%20%7C", there was nothing like that when I cut and paste the code from Google Fonts.

What does it mean?

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi Candido, I am glad your issue is solved. %20 signifies space, and %7C, which was already in your URL before I suggested adding the %20 instead of space, signifies this character "|".

What does it mean and why does it happen? Why do you have to change those characters or white-spaces into strange % symbols?

You have to do that because it is unsafe. If you want a more thorough answer to that, it can be found at rfc1738 - Uniform Resource Locators (URL) and specifically the answer is this

" Unsafe:

Characters can be unsafe for a number of reasons. The space character is unsafe because significant spaces may disappear and insignificant spaces may be introduced when URLs are transcribed or typeset or subjected to the treatment of word-processing programs. The characters "<" and ">" are unsafe because they are used as the delimiters around URLs in free text; the quote mark (""") is used to delimit URLs in some systems. The character "#" is unsafe and should always be encoded because it is used in World Wide Web and in other systems to delimit a URL from a fragment/anchor identifier that might follow it. The character "%" is unsafe because it is used for encodings of other characters. Other characters are unsafe because gateways and other transport agents are known to sometimes modify such characters. These characters are "{", "}", "|", "\", "^", "~", "[", "]", and "`".

All unsafe characters must always be encoded within a URL. For example, the character "#" must be encoded within URLs even in systems that do not normally deal with fragment or anchor identifiers, so that if the URL is copied into another system that does use them, it will not be necessary to change the URL encoding. "

To find the encoding reference for those symbols you can check the table here - W3Schools URL - Uniform Resource Locator.

I hope this helps :D

Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points
Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points

Hey there guys, thanks for the inputs. Now that I followed your advice I finally passed the validator. However, Dreamweaver was displaying an error regarding the single quotes "attribute href must closed with doble quotes". I changed the single quotes for double quotes and now I have no errors in Dreamweaver and I still passed the W3 validator. Is it correct to ad double quotes? This is the code: 

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,800,400%7CChanga+One" rel="stylesheet" type="text/css">
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Sebastian Angelo-Perez - I used markdown on your code. Try clicking "edit" to see what I added. Double quotes are okay. You might like to check Single vs Double quotes (' vs ").