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

Posted by Jennifer Turner
Jennifer Turner
699 Points

I have so many errors after doing markup validation on index.html. I have no clue what half of them mean!!

I started trying to fix things, but then got completely overwhelmed. Any help is appreciated. I don't understand how my page came out looking the way it was supposed to with so many errors.

I have pasted the errors and my code follows below.

Thanks!

Here are the errors: Validation Output: 31 Errors

Error Line 6, Column 27: No space between attributes. <link rel="stylesheet"href="css/normalize.css"> ✉ 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 URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Error Line 8, Column 27: No space between attributes. <link rel="stylesheet"href="css/main.css"> ✉ Error Line 9, Column 27: No space between attributes. <link rel="stylesheet"href="css/responsive.css"> ✉ Error Line 31, Column 22: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-01.jpg"> ✉ Error Line 31, Column 27: A slash was not immediately followed by >. <a href"img/numbers-01.jpg"> ✉ Error Line 31, Column 41: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-01.jpg"> ✉ Warning Line 31, Column 42: Attribute href"img is not serializable as XML 1.0. <a href"img/numbers-01.jpg"> ✉ Warning Line 31, Column 42: Attribute numbers-01.jpg" is not serializable as XML 1.0. <a href"img/numbers-01.jpg"> ✉ Error Line 31, Column 42: Attribute href"img not allowed on element a at this point. <a href"img/numbers-01.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 31, Column 42: Attribute numbers-01.jpg" not allowed on element a at this point. <a href"img/numbers-01.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 38, Column 22: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-02.jpg"> ✉ Error Line 38, Column 27: A slash was not immediately followed by >. <a href"img/numbers-02.jpg"> ✉ Error Line 38, Column 41: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-02.jpg"> ✉ Warning Line 38, Column 42: Attribute href"img is not serializable as XML 1.0. <a href"img/numbers-02.jpg"> ✉ Warning Line 38, Column 42: Attribute numbers-02.jpg" is not serializable as XML 1.0. <a href"img/numbers-02.jpg"> ✉ Error Line 38, Column 42: Attribute href"img not allowed on element a at this point. <a href"img/numbers-02.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 38, Column 42: Attribute numbers-02.jpg" not allowed on element a at this point. <a href"img/numbers-02.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 44, Column 22: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-06.jpg"> ✉ Error Line 44, Column 27: A slash was not immediately followed by >. <a href"img/numbers-06.jpg"> ✉ Error Line 44, Column 41: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-06.jpg"> ✉ Warning Line 44, Column 42: Attribute href"img is not serializable as XML 1.0. <a href"img/numbers-06.jpg"> ✉ Warning Line 44, Column 42: Attribute numbers-06.jpg" is not serializable as XML 1.0. <a href"img/numbers-06.jpg"> ✉ Error Line 44, Column 42: Attribute href"img not allowed on element a at this point. <a href"img/numbers-06.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 44, Column 42: Attribute numbers-06.jpg" not allowed on element a at this point. <a href"img/numbers-06.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 50, Column 22: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-09.jpg"> ✉ Error Line 50, Column 27: A slash was not immediately followed by >. <a href"img/numbers-09.jpg"> ✉ Error Line 50, Column 41: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-09.jpg"> ✉ Warning Line 50, Column 42: Attribute href"img is not serializable as XML 1.0. <a href"img/numbers-09.jpg"> ✉ Warning Line 50, Column 42: Attribute numbers-09.jpg" is not serializable as XML 1.0. <a href"img/numbers-09.jpg"> ✉ Error Line 50, Column 42: Attribute href"img not allowed on element a at this point. <a href"img/numbers-09.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 50, Column 42: Attribute numbers-09.jpg" not allowed on element a at this point. <a href"img/numbers-09.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 56, Column 22: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-12.jpg"> ✉ Error Line 56, Column 27: A slash was not immediately followed by >. <a href"img/numbers-12.jpg"> ✉ Error Line 56, Column 41: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <a href"img/numbers-12.jpg"> ✉ Warning Line 56, Column 42: Attribute href"img is not serializable as XML 1.0. <a href"img/numbers-12.jpg"> ✉ Warning Line 56, Column 42: Attribute numbers-12.jpg" is not serializable as XML 1.0. <a href"img/numbers-12.jpg"> ✉ Error Line 56, Column 42: Attribute href"img not allowed on element a at this point. <a href"img/numbers-12.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Error Line 56, Column 42: Attribute numbers-12.jpg" not allowed on element a at this point. <a href"img/numbers-12.jpg"> Attributes for element a: Global attributes href target download rel hreflang type Warning Line 28, Column 17: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> ✉ Error Line 67, Column 98: No space between attributes. …e76"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a> ✉ Error Line 68, Column 110: No space between attributes. …"> <img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> ✉ ↑ TOP

Here is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jennifer Turner | 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>Jennifer Turner</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">
          <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/jleanne76"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
   <a href="http://facebook.com/jenniferboydturner"> <img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>

  <p>&copy; 2015 Jennifer Turner.</p>
  </footer>
</div>

</body> </html>

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Jennifer,

It's likely that some of them will be caused by previous errors and once they are resolved it will sort a few at once.

It's a little difficult to explain each error you're receiving but I would take one at a time and view the page source based on the line number and code excerpt given in the error. For example:

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'>

This one is saying that there is an illegal character in the path. If I didn't know what this was I would Google "illegal characters in path google fonts". As it happens the first result is a Treehouse post :) You'll find the answer for that one here:

https://teamtreehouse.com/forum/my-index-page-is-not-validating

Once you've done one re-validate and see how many errors are removed before repeating the process.

On a side note, I notice you're missing the = from the hrefs on your images:

<a href"img/numbers-01.jpg">

As an example this would become:

<a href="img/numbers-01.jpg">

That should remove quite a few of the errors.

Hope that helps :)

-Rich

Ben Attenborough
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 Points
Ben Attenborough
.a{fill-rule:evenodd;}techdegree seal-36
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 Points

Also you need some spaces between your attributes. So:

<a href="http://twitter.com/jleanne76"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>

Should be

<a href="http://twitter.com/jleanne76"> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>

With a space between the " and the c. Also try to be consistent on using either double or single quotes.

Generally keep the formatting tidy, indent the code properly and test the code regularly to pick up on any errors.

Hope that helps!