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 Elias Harfouch
Elias Harfouch
616 Points

A number of errors picked up on my HTML code by W3C Validator

Hi guys,

Sorry, I know the Google Font Code issue has come up with W3C validator in the past and I understand the solution has been replacing the | with '%7C'. Unfortunately, it hasn't worked for me. W3C has also picked up an additional 8 errors in my HTML code - that must be a record! Just wondering if anyone can assist me with resolving the errors. I have pasted my code in its entirety below and also the messages from the Validator website [immediately below]. I appreciate it would might be very difficult to follow. Thanks so much.

Elias. 

Error Line 8, Column 108: Bad value http://fonts.googleapis.com/css?↩ family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800 for attribute href on element link: Tab, new line or carriage return found.
…: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 50, Column 16: An a start tag seen but an element of the same type was already open.
            <a/>
✉
Error Line 50, Column 16: Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
            <a/>
✉
Error Line 51, Column 15: End tag li seen, but there were open elements.
          </li>
✉
Error Line 50, Column 16: Unclosed element a.
            <a/>
✉
Error Line 52, Column 10: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
          <li>
Contexts in which element a may be used:
Where phrasing content is expected.
Content model for element ul:
Zero or more li and script-supporting elements.
Error Line 53, Column 41: An a start tag seen but an element of the same type was already open.
            <a href="img/numbers-12.jpg">
✉
Error Line 53, Column 41: End tag a violates nesting rules.
            <a href="img/numbers-12.jpg">
✉
Error Line 53, Column 41: Cannot recover after last error. Any further errors will be ignored.
            <a href="img/numbers-12.jpg">

My HTML code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Elias Harfouch | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?
  family=Changa+One%7COpen+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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Elias Harfouch</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>
            <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://linkedin.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"
        class="social-icon"></a>
        <a href="http://hotmail.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"
      class="social-icon"></a>
      <p>&copy; 2014 Elias Harfouch.</p>
    </footer>
      </div>
  </body>
</html>
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Can you markdown your code by using the example found here How-to Guide: Markdown within Posts ? We can't see your code to help.

5 Answers

kareem Pierre
.a{fill-rule:evenodd;}techdegree
kareem Pierre
Full Stack JavaScript Techdegree Student 20,263 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Elias Harfouch | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?
  family=Changa+One%7COpen+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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Elias Harfouch</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>

         <!-- add closing li tag here -->

            <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            <a/> <!-- fix this closing anchor tag-->
          </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://linkedin.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"
        class="social-icon"></a>
        <a href="http://hotmail.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"
      class="social-icon"></a>
      <p>&copy; 2014 Elias Harfouch.</p>
    </footer>
      </div>
  </body>
</html>

here is your code. I added comments on what needs fixing. I don't think the warning for sector will break your code. your missing a closing li tag and the closing anchor tag needs fixing.

hope this helps

Elias Harfouch
Elias Harfouch
616 Points

Thanks so much Kareem. That fixed it for me. Thanks again.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Elias,

We would need to see the code to be able to look up the errors mentioned above and spot the changes needed, rather than paste the code you can drop in the url of the preview if you have been working in workspaces?

Thanks Craig

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

Hi Craig,

Thanks very much for your quick reply. Apologies as I'm a beginner but I'll try and drop my url below:

http://teamtreehouse.com/workspaces/1025572

If that is incorrect, please let me know and I'll try something else or try to mark down as kindly suggested by Gloria - although that looks a little complicated for me…thanks again.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Apart from the missing </li> tag above this 

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

It seems that you have split the URL in two lines. It has to be in one line not two.

Elias Harfouch
Elias Harfouch
616 Points

Thanks Gloria!

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

You are welcome :)

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Kareem's Changes cover the errors I can see to, when you close the </a> correctly for image-09, that will correct the error codes on the image-12 as at the moment the browser is reading from your opening 09 all the way to 12 as shown:

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

Because of the highlighted error this is all one <a> tag with two references and two sources conflicting each other.

I hope we have been able to help!

Thanks Craig

Elias Harfouch
Elias Harfouch
616 Points

Thanks very much for explaining that Craig. You've all been great. Much appreciated.