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
stevencooper
5,755 Pointswhat is the accuracy of the w3c validater?
I am having trouble getting my html to pass validation. It keeps telling me I have 11 errors. When I check the list of errors, it seems to think that I have left off 11 closing angle brackets >. Workspace doesn't show any red, which means all brackets are 'closed' < >.
What do I do? As far as I can tell, my workspace index.html is identical to the instructor's page, line for line, but when he runs his html through the W3C validater, he gets no error messages.
Any ideas?
stevencooper
5,755 PointsHi Jason, here is the code & error messages I receive when i use the W3C validator.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Steven M. Cooper | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,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>Steven M. Cooper</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/coby in blinds.jpg">
<img src="img/coby in blinds.jpg" alt="">
<p>Coby in the Blinds At Karen's</p>
</a>
</li>
<li>
<a href="img/Coby n BK.jpg">
<img src="img/Coby n BK.jpg" alt="">
<p>Coby and BK, "The Boyz"</p>
</a>
</li>
<li>
<a href ="img/At Karens 1.jpg">
<img src="img/At Karens 1.jpg" alt="">
<p>The Boyz At Karen's House</p>
</a>
</li>
<li>
<a href="img/watching for dad to return.jpg">
<img src="img/watching for dad to return.jpg" alt="">
<p>The Boyz watching for Dad's return</p>
</a>
</li>
<li>
<a href="img/dad & mutts_edited.jpg">
<img src="img/dad & mutts_edited.jpg" alt="">
<p>Dad and the Boyz</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/@smcooper1956"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/steven.m.cooper.79"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Steven M. Cooper</p>
</footer>
</div>
</body>
</html>
and here are the error messages:
Validation Output: 11 Errors
Error Line 7, Column 142: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800 for attribute href on element link: Illegal character in query: not a URL code point.
…ne|Open+Sans:400,400italic,700,700italic,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 30, Column 46: Bad value img/coby in blinds.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href="img/coby in blinds.jpg">
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 31, Column 55: Bad value img/coby in blinds.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/coby in blinds.jpg" alt="">
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 36, Column 40: Bad value img/Coby n BK.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href="img/Coby n BK.jpg">
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 37, Column 50: Bad value img/Coby n BK.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/Coby n BK.jpg" alt="">
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 42, Column 43: Bad value img/At Karens 1.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href ="img/At Karens 1.jpg">
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 43, Column 52: Bad value img/At Karens 1.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/At Karens 1.jpg" alt="">
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 48, Column 57: Bad value img/watching for dad to return.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href="img/watching for dad to return.jpg">
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 49, Column 67: Bad value img/watching for dad to return.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/watching for dad to return.jpg" alt="">
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 54, Column 50: Bad value img/dad & mutts_edited.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href="img/dad & mutts_edited.jpg">
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 55, Column 59: Bad value img/dad & mutts_edited.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/dad & mutts_edited.jpg" alt="">
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>
All the errors reported by W3C involve the closing angle bracket at the end of the statement, or > bracket. At least all the reported errors have a red > bracket that is underlined, and scrolling my cursor over the 'error', it says that this is the error.
Unfortunately, even using the 3 code ticks doesn't show the main part of the code. i tried again in another comment but it wouldn't post the main part of my html coding. That's never happened to me before!
thanks for your help
Jason Anello
Courses Plus Student 94,610 PointsThe 3 backticks should be on their own line with the code between them. It looks like you have your 3 opening ticks on the same line as the doctype.
See this thread: https://teamtreehouse.com/forum/posting-code-to-the-forum
3 Answers
Chris Shaw
26,676 PointsThe W3C validator is pretty close to being 100% accurate, normally I find breaking the code down inside the <body> tag allows you to see which parts are failing rather than the entire source as a whole, typically when you get these types of errors relating to unclosed tags it's due to something else like an attribute not being closed.
stevencooper
5,755 PointsThanks for your swift response. If I understand you correctly, you are suggesting that I take sections of the code and run them thru the validater each bit alone. I will certainly try that. What has me confused is that the workspace shows no red, which would indicate an open tag somewhere.
Oh, and btw, I ran my .css coding through it's validater and it checked out as OK. So the problem exists somewhere in my index.html page.
Chris Shaw
26,676 PointsMake sure you keep the <html> and <body> tags and what no but just break down the code inside the <body> tag, a possible reason for you not to see any red is HTML5 validates attributes without quotes so it may be the case that workspaces uses this in it's validation process.
stevencooper
5,755 PointsSorry, Chris, but part of your comment doesn't make sense to me...Make sure you keep the <html> and <body> tags** and what no but just break down the code** inside the <body>
could you restate or clarify your comment? thanks a lot, i appreciate your help.
Chris Shaw
26,676 PointsSay you have some like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Simply break it down so you have less child elements to deal with inside your <body> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
stevencooper
5,755 PointsThanks, i will certainly give your technique a try!
And a try I did... with no success. I used just the head & footer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Steven M. Cooper | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,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>
</body>
</html>
When i ran this part of the code, the closing bracket on the link to the various fonts selected is present, but the validator says it's missing!
Jason Anello
Courses Plus Student 94,610 PointsFor the Google fonts error you have to url encode the vertical bar |
Replace it with %7C
I can't see all of your html yet but based off the error messages you have spaces in your file names.
You can url encode those spaces and replace all of them with %20 but it might be better to stop using spaces.
You can use an underscore _ where you would normally have a space. This keeps the individual words separated and you don't have to encode the spaces.
I would make those changes and then run it through the validator again and see what it comes up with.
Jouke Jonkers
9,286 PointsJudging on your error messages, I see one thing reoccuring:
Use of illegal characters in file names: Most of your image file names have spaces in them. This is not allowed. For more info check this link: http://www.mtu.edu/umc/services/web/cms/characters-avoid/
Something that might "fix" your problem with the "closing angle bracket error": What doctype are you validating for? You write HTML5, but are you sure you're checking this? For instance: In HTML5 it is allowed not to close the <img> tag. In XHTML this is NOT allowed, its always <img />
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Steven,
You can post the html and the error messages you're getting if you want to get more direct help.
I would take a look at the very first error and work on that one before worrying about the others. You may not necessarily have 11 errors but sometimes 1 error can cause other parts of the validation process to fail and produce more errors.