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

Posted by ramseydennis
ramseydennis
4,530 Points

Error found while checking this document as HTML5 - validator.w3.org - why wasn't my HTML validated like Nick's?

I am on the "Responsive Web Design and Testing" video and having my index.html checked on validator.w3.org.

My code wasn't approved like Nick's was - can anyone help me better understand this? Here's what it says:

"The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document. 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.

↑ TOP

Validation Output: 1 Error

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

Here is my index.html code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>Ram | 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">
   <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>Ramsey</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>Drips created using Photoshop.</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/metrocollab"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/metrocollaborative"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 Ram.</p>
    </footer>
      </div>
  </body>
</html>

Thanks -

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

The W3C validator is regularly updated I believe, so Nick's may have passed validation then, but the same code will spring up errors now. The problem is the pipe symbol in your Google fonts code. Changing it to %7C will allow you to pass validation (I had the same issue a while back).

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

Hey Ryan,

Thanks for your help. When you say change it to %7C - do you mean change "One%7COpen" to "One%7C"?

Thanks again -

ramseydennis
ramseydennis
4,530 Points

Never mind, I figured out what you meant. I suppose I should also change this on my Workspaces? Do you have any idea what it seems to work even if it's invalid?

Thanks