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

Watch Video

Posted May 27, 2014 11:42pm by

My index.html can not pass W3C validator!

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. Warning Line 27, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section>

4 Answers

May 28, 2014 3:03am

Hi Daniel,

The vertical bar | needs to be url encoded. Replace it with %7C

May 28, 2014 3:58am

It really works! Thank you so much.

May 28, 2014 4:03am

Glad it helped.

May 28, 2014 4:41am

Forgot to mention that it looks like your second message is a warning and not an error.

You should try to fix all of your errors. Warnings aren't as serious and you don't necessarily need to fix them. Think of them more like "We recommend that you do it like this."

All this warning is saying is that the <section> element usually contains a heading element to identify what the section is about. The validator noticed that you didn't have one and so it issues the warning.

You have <ul id="gallery"> and that may be sufficient in identifying what this section is about.

If you want to follow the spec more closely then you could add a heading to the top of your section. Something like <h3>Portfolio</h3>

That should get rid of the warning if you wanted to.

May 28, 2014 4:53am

Take our <section> and tried, now I have two warnings:

Info Using experimental feature: HTML5 Conformance Checker. The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.
Info Using Direct Input mode: UTF-8 character encoding assumed Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified. If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

I didn't add <h3>Portfolio</h3>.

May 28, 2014 5:07am

These you don't have to worry about. I've seen them come up with different html that I've used.

The first warning is about the validator itself not anything in your html. It's saying that the html5 conformance checker may be unreliable and not up to date because it is an experimental feature at this point in time.

The second warning is saying that when you use the direct input method of the validator that it automatically makes your data utf-8 and it will ignore the charset that you have in your <head> section.

May 28, 2014 5:09am

Got it, thanks!

May 27, 2014 11:48pm

Are you talking about this validator? Because I just tried it and it works just fine with the first url.

May 28, 2014 12:09am

By the way, where do I get the good source code of index.html? Thanks.

May 28, 2014 12:23am

The "Here" in your last email just a second ago breaks. I can not download it. Please send it again, thx!

May 28, 2014 12:26am

Here it is!

May 28, 2014 12:27am

Got it, thx!

May 28, 2014 12:38am

Hi Chase, I copy the source and the same error returned from W3C:

Validation Output: 1 Error

Error Line 8, Column 138: 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. Warning Line 26, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section>

----- the source:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css">

May 28, 2014 12:42am

There are actually two errors:

Error Line 8, Column 138: 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.

From Daniel: it is the ">" of "...'text/css'>" where the error was detected.

Line 26, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> From Daniel: it is the ">" of "<section>" where the error was detected.

Both errors are complaining about the ">".

May 28, 2014 12:47am

Then it should probably by fine. It might just be some strange thing that the machine picked up witch doesn't really matter. If the site works then it should be fine.

May 28, 2014 12:51am

Then how come you said that there was no error when you tested it? Just want to be perfect, thx!

May 27, 2014 11:56pm

Yes, but I tried my code that's typed in by following Nick's online training:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Daniel C. Deng | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 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>Daniel C. Deng</h1>
        <h2>Javascript, AJAX, JQuery, HTML5, CSS, MVC, Java/C++, JDBC, Oracle</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 modes 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>
    </div>
    <footer>
      <a href="http://twitter.com/dan6898"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/danny.teng.90"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2014 Daniel C Deng.</p>
    </footer>
  </body>
</html>

May 28, 2014 1:17am

The '|' character is an invalid character for links. If you just take that out of the link to your font (http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800) the test will valid your code. But since this character is the one given by the google api itself, I'm assuming, you will have to deal with it. :(

May 28, 2014 1:29am

Thanks, mystery finally solved!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Deng

Daniel Deng

My index.html can not pass W3C validator!

4 Answers

Jason Anello

Jason Anello

Daniel Deng

Daniel Deng

Jason Anello

Jason Anello

Jason Anello

Jason Anello

Daniel Deng

Daniel Deng

Jason Anello

Jason Anello

Daniel Deng

Daniel Deng

Chase Lee

Chase Lee

Daniel Deng

Daniel Deng

Daniel Deng

Daniel Deng

Chase Lee

Chase Lee

Daniel Deng

Daniel Deng

Daniel Deng

Daniel Deng

Daniel Deng

Daniel Deng

Chase Lee

Chase Lee

Daniel Deng

Daniel Deng

Daniel Deng

Daniel Deng

Fabrício Montenegro

Fabrício Montenegro

Daniel Deng

Daniel Deng