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 trialDaniel Deng
Courses Plus Student 4,322 PointsMy 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
Jason Anello
Courses Plus Student 94,610 PointsHi Daniel,
The vertical bar |
needs to be url encoded. Replace it with %7C
Chase Lee
29,275 PointsAre you talking about this validator? Because I just tried it and it works just fine with the first url.
Daniel Deng
Courses Plus Student 4,322 PointsBy the way, where do I get the good source code of index.html? Thanks.
Daniel Deng
Courses Plus Student 4,322 PointsThe "Here" in your last email just a second ago breaks. I can not download it. Please send it again, thx!
Daniel Deng
Courses Plus Student 4,322 PointsGot it, thx!
Daniel Deng
Courses Plus Student 4,322 PointsHi 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">
<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"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nick Pettit.</p> </footer> </div> </body> </html>
Daniel Deng
Courses Plus Student 4,322 PointsThere 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 ">".
Chase Lee
29,275 PointsThen 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.
Daniel Deng
Courses Plus Student 4,322 PointsThen how come you said that there was no error when you tested it? Just want to be perfect, thx!
Daniel Deng
Courses Plus Student 4,322 PointsYes, 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>© 2014 Daniel C Deng.</p>
</footer>
</body>
</html>
Fabrício Montenegro
18,723 PointsThe '|' 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. :(
Daniel Deng
Courses Plus Student 4,322 PointsThanks, mystery finally solved!
Daniel Deng
Courses Plus Student 4,322 PointsDaniel Deng
Courses Plus Student 4,322 PointsIt really works! Thank you so much.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsGlad it helped.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsForgot 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.
Daniel Deng
Courses Plus Student 4,322 PointsDaniel Deng
Courses Plus Student 4,322 PointsTake 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>.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsThese 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.Daniel Deng
Courses Plus Student 4,322 PointsDaniel Deng
Courses Plus Student 4,322 PointsGot it, thanks!