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
Daniel Hildreth
16,170 PointsTried to validate a web site, but it said it wasn't validated as html 5. It gave me syntax errors and such. Help?
So I made a website through Treehouse, and after it was all done, I used the FireFox Dev Tools to try and validate the HTML. It said it wasn't validated. Can someone please help me? The following are the errors it gave:
1) Line 30, Column 46: Bad value img/The Diamond Caper.jpg for attribute href on element a: Illegal character in path segment: not a URL code point.
<a href="img/The Diamond Caper.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.
2) Line 31, Column 56: Bad value img/The Diamond Caper.jpg for attribute src on element img: Illegal character in path segment: not a URL code point.
<img src="img/The Diamond Caper.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.
Numbers 1 and 2 are errors that it found when validating it. The website is lpstories.com. Also, I have some interesting spacing issues on the About page on the site, if someone can look into that, and tell me how to center the last 2 links with the other previous links.
3 Answers
Justin Black
24,793 PointsI went to validate your site, and I saw the same issues. w3c is also showing the same issues. It's valid HTML.
Problem is the image names. They have spaces in them, this is inherently a violation of HTML5 ( the internet hates spaces ).. rename the images with underscores, and try it again. If it still fails, then try adding a ./ before img in both the href and src.
As for the positioning of the list ( I imagine that's what you're talking about ) is you change your CSS rule for website-purchase to this:
.website-purchase {
list-style: outside none none;
padding: 0px;
margin: 0px;
font-size: 0.9em;
float: left;
}
then it will work. The wrap around like that is a weird issue, but float: left repairs it.
Marcus Parsons
15,719 PointsHey Daniel,
What the validator is referring to is URL encoding. Spaces are incredibly difficult to interpret by browsers so it wants you to convert each space into a %20 sign like so:
<a href="img/The%20Diamond%20Caper.jpg">
<img src="img/The%20Diamond%20Caper.jpg" alt="">
The %20 sign is converted by browsers into a space.
However, the easiest way to avoid this problem is to avoid using spaces in your file names. Use a - or _ as a spacer instead of a space and you will save yourself heartache and confusion! :)
Daniel Hildreth
16,170 PointsMarcus I edited those spaces like that in the FireFox Dev Tools, however when I go to re-validate it, it gives me the same errors.
Justin Black
24,793 PointsYou can't edit it in dev tools, it has to be done in the source code and the source has to be re-uploaded as the validator sees the live site, without your changes.
Marcus Parsons
15,719 PointsI checked the following simple HTML document with the W3C Validator and it successfully validates as HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="img/The%20Diamond%20Caper.jpg"></a>
<img src="img/The%20Diamond%20Caper.jpg" alt="">
</body>
</html>
Daniel Hildreth
16,170 PointsThank you all that has helped me so much!
Marcus Parsons
15,719 PointsNo problem, Daniel!