Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Website Testing

Lynda Irawaty
Lynda Irawaty
2,948 Points

I also have few errors validating my html, can anyone please help me? Dunno what's wrong? https://w.trhou.se/tv3pofszbz

I have few errors on my index.html code, tried to fix it but I dunno how to fix them?

Error Line 11, Column 3: Saw < when expecting an attribute name. Probable cause: Missing > immediately before. </head> ✉ Error Line 11, Column 5: A slash was not immediately followed by >. </head> ✉ Warning Line 11, Column 9: Attribute < is not serializable as XML 1.0. </head> ✉ Error Line 11, Column 9: Attribute < not allowed on element meta at this point. </head> Attributes for element meta: Global attributes name http-equiv content charset Error Line 11, Column 9: Attribute head not allowed on element meta at this point. </head> Attributes for element meta: Global attributes name http-equiv content charset Warning Line 27, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> ✉ Error Line 56, Column 99: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Warning Line 56, Column 120: Attribute logo" is not serializable as XML 1.0. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Error Line 56, Column 120: Attribute logo" not allowed on element img at this point. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height Error Line 57, Column 102: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Warning Line 57, Column 123: Attribute logo" is not serializable as XML 1.0. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Error Line 57, Column 123: Attribute logo" not allowed on element img at this point. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>

Hi Lynda,

Can you post your code please?

Thanks

-Rich

Lynda Irawaty
Lynda Irawaty
2,948 Points
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lynda Irawaty | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,700,800,400' 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>Lynda Irawaty</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>Lada Putih Cafe Delivery Menu</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Huawei One Art World E-invite</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-03.jpg">
              <img src="img/numbers-03.jpg" alt="">
              <p>Bloomberg Summer Picnic Poster</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-04.jpg">
              <img src="img/numbers-04.jpg" alt="">
              <p>Audi Hong Kong Moodboard</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

3 Answers

Hi Lynda,

You look to be missing a closing bracket on this line:

<meta name="viewport" content="width=device-width, initial scale=1.0"

Can you add that and retry the validation please?

Thanks

-Rich

EDIT: Following your additional code you look to be missing the question mark (?) between css and family so:

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

would become:

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,700,800,400' rel='stylesheet' type='text/css'>
Lynda Irawaty
Lynda Irawaty
2,948 Points

Thanks Rich, I have fixed that and revalidate but it still saying these errors

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lynda Irawaty | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css family=Open+Sans:400italic,700italic,800italic,700,800,400' 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>Lynda Irawaty</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>Lada Putih Cafe Delivery Menu</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Huawei One Art World E-invite</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-03.jpg">
              <img src="img/numbers-03.jpg" alt="">
              <p>Bloomberg Summer Picnic Poster</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-04.jpg">
              <img src="img/numbers-04.jpg" alt="">
              <p>Audi Hong Kong Moodboard</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

Validation Output: 5 Errors

Warning This interface to HTML5 document checking is deprecated. Use the Nu Html Checker at https://validator.w3.org/nu/ directly instead.

Error Line 7, Column 141: Bad value http://fonts.googleapis.com/css family=Open+Sans:400italic,700italic,800italic,700,800,400 for attribute href on element link: Illegal character in path segment: not a URL code point. …ns:400italic,700italic,800italic,700,800,400' 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 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> ✉ Error Line 56, Column 99: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Warning Line 56, Column 120: Attribute logo" is not serializable as XML 1.0. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Error Line 56, Column 120: Attribute logo" not allowed on element img at this point. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height Error Line 57, Column 102: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Warning Line 57, Column 123: Attribute logo" is not serializable as XML 1.0. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Error Line 57, Column 123: Attribute logo" not allowed on element img at this point. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height

Hi Lynda,

I've updated my answer above. Could you try that please?

Thanks

-Rich

Lynda Irawaty
Lynda Irawaty
2,948 Points

Rich, Thank you for helping me :)

Turned out I also was missing " at my footer.

      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

so I have fixed it

      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

and it worked great :)

No problem :)