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.

HTML

Daniel Hildreth
Daniel Hildreth
16,170 Points

Tried 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
Justin Black
24,266 Points

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

Hey 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
Daniel Hildreth
16,170 Points

Marcus 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
Justin Black
24,266 Points

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

I 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
Daniel Hildreth
16,170 Points

Thank you all that has helped me so much!

No problem, Daniel!