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 Vincent Scaduto
Vincent Scaduto
4,110 Points

Error when validating code

When I copy my code into the Validation service, it gives me a Validation Output: 1 Error that says,

"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 URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20."

and

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

I was wondering if anyone could explain to me what went wrong, enclosed is my code as well.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vincent Scaduto | Pizza Addict</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>Vincent Scaduto</h1>
       <h2>Nerd</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 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="https://twitter.com/VScaduto"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
          <a href="https://www.facebook.com/chester.mohammed"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy; 2015 Vincent Scaduto.</p>
        </footer>
    </div>
   </body>
</html>

6 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Vincent,

The first error relates to your Google font reference, you can ignore this as the W3C validator doesn't like it when you have a tag value that contains symbols such as a + sign, sadly because of how Google parse the query string we can't URL encode it but we can treat it as more of a warning than an error.

As for the second error it's saying you don't have an H2-H6 tag in your section element which is a requirement when using them, I personally would change the section tag to be a nav tag since your unordered list contains anchors.

Hope that helps.

Vincent Scaduto
Vincent Scaduto
4,110 Points

I'm still a little confused sadly, Ive been following the front end web development track to create this code and when the instructor added this code for validation, he didn't get the same issue as me.

Chris Shaw
Chris Shaw
26,676 Points

It will be confusing as this course was put together before HTML5 as a recommended specification was finished meaning the validator didn't pick up these problems before because the course is now older than the recommended spec.

Vincent Scaduto
Vincent Scaduto
4,110 Points

To follow up on your advice, I changed out the <section> for <nav2> and it fixed my error! thank you so much for taking the time to help me out! 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vincent Scaduto | Pizza Addict</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>Vincent Scaduto</h1>
       <h2>Nerd</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">
        <nav2>
          <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 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>
        </nav2>
        <footer>
          <a href="https://twitter.com/VScaduto"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
          <a href="https://www.facebook.com/chester.mohammed"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy; 2015 Vincent Scaduto.</p>
        </footer>
    </div>
   </body>
</html>
Chris Shaw
Chris Shaw
26,676 Points

One minor thing and that is nav2 isn't a valid HTML5 tag, it should just be nav.

Vincent Scaduto
Vincent Scaduto
4,110 Points

ahah yeah sorry I got a head of myself and i accidentally entered the wrong page into the validate service when I checked it, little bit embarrassed but I did change it to nav and its working now.

Saad Anjum
Saad Anjum
6,408 Points
Saad Anjum
Saad Anjum
6,408 Points

Are you sure your code got pasted properly? I would assume you to have a head element which would contain the top portion (title, link , etc) and a body element containing the rest of code:

<!DOCTYPE html>

<head>
<title>Vincent Scaduto | Pizza Addict</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>
. . . Rest of your stuff
</body>
Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

Heading tags are optional, but a good practice for SEO and usability. Here's an article if you want to read more... http://blog.woorank.com/2013/04/how-to-use-heading-tags-for-seo/

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

HI Vincent,

The problem is some characters on this line:

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

You need to substitute the '+' with '%20' and the '|' with 'U+007C' like this:

<link href='http://fonts.googleapis.com/css?family=Changa%20OneU+007COpen%20Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
Vincent Scaduto
Vincent Scaduto
4,110 Points
Vincent Scaduto
Vincent Scaduto
4,110 Points

Thank you for clarifying this up, I'll have to play around with the code when I get home and fix it. Thank you and everyone else for your input

Vincent Scaduto
Vincent Scaduto
4,110 Points
Vincent Scaduto
Vincent Scaduto
4,110 Points

Thank you for clarifying this up, I'll have to play around with the code when I get home and fix it. Thank you and everyone else for your input