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 How to Make a Website Responsive Web Design and Testing Website Testing

daniela
daniela
2,629 Points

Error during the W3C Markup Validation

I got a validation output error on Line 7, Column 142 when I tried validating my HTML code using [validator.w3.org](validator.w3.org). My understanding is that the error refers to the point before the > in the head of the HTML after the css' at the end of the link to the Google fonts.

The error mentioned is that there is a bad value for attribute href on element link: Illegal character in query: not a URL code point. The Syntax of IRI reference is: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

HTML code for reference below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Daniela Lazar | 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">
  </head>
...

6 Answers

It's the pipe character (vertical bar). Try url encoding that.
http://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org

Looking at the first answer it looks like it's %7C

I think that you will most commonly see double quotes around attribute values.

daniela
daniela
2,629 Points

Thanks Jason! That fixed it by adding the %7C instead of the vertical bar. Great job!

I am not sure if I link to Nick Pettit's Profile if it will alert him, but that would be a good note to add in the video tutorial.

  • Daniela
James Barnett
James Barnett
39,199 Points

Daniela Engstrom -

> I am not sure if I link to Nick Pettit's Profile if it will alert him

No, you have to use an @ in front of a person's username and then it will bring up a dropdown list.

James Barnett
James Barnett
39,199 Points

Tagging Nick Pettit to let him know about this issue.

James Barnett - I read in another post that using @ was simply a shortcut to setting up the link manually using markdown syntax.

I've noticed that both Daniela's link and your link are going to Nick's profile page but are you saying that your link is the only one that will alert him that he was mentioned?

James Barnett
James Barnett
39,199 Points

Jason Anello -

> are you saying that your link is the only one that will alert him that he was mentioned

That's my understanding.

We can test it right now if you reply to me and link to my profile instead of using an @.

James Barnett

I linked using the markdown syntax.

Did you get a mention?

James Barnett
James Barnett
39,199 Points

Jason Anello -

> Did you get a mention?

Nope.

Ok, that's good to know. Thanks James.

Using @ links to the profile and sends notication. The markdown link only links to the profile.

Nick Pettit
Nick Pettit
Treehouse Teacher

Hm, good to know, although I honestly don't think this is that big of a deal. Validation can be helpful for identifying typos and more serious issues. Also, if there are many validation errors, cross-browser results will become increasingly unpredictable. If it's just this one error, it's probably not a problem though. Many websites in production environments have some kind of validation error for one reason or another.

Justin Hunter
PLUS
Justin Hunter
Courses Plus Student 11,484 Points

Hi Daniela, it looks like a lot of people have been experiencing that. I definitely did too. I can't figure out if it is an error with the validator or Google's code for web fonts. Regardless, the code works and renders the font as expected, so I wouldn't worry about it.

daniela
daniela
2,629 Points

Thanks Jason! I tried changing the quotes to double quotes and it had the same error, which lead me to another question maybe you know already. When do I use a single quote or a double quote? It seems that there are other css links in the header with double quotes and this one has singles. Are they interchangeable? Thanks!

Justin Hunter
PLUS
Justin Hunter
Courses Plus Student 11,484 Points

Good question. There are times where you are going to have to use single quotes, but for the most part it doesn't matter if you use single or double quotes. One example of a time where I can think single quotes are necessary is in CSS when adding a background-image, you would type: .content{ background-image: url('picture.jgp')}

Here is a good thread on stack overflow that talks about this: http://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs

Hi Justin,

It turns out that you can use single, double, or no quotes at all around the url even whitespace should be ok.

All of these should be valid:

background-image: url('picture.jgp')
background-image: url("picture.jgp")
background-image: url(picture.jgp)
background-image: url( picture.jgp )

I've never seen it with whitespace but according to the spec, it's allowed.

File extension should be .jpg

I can 't seem to edit comments on here.

daniela
daniela
2,629 Points

Yup, I tried the different single, double, nothing, and white space and they all still worked in all the browsers. I wish everything in coding was so flexible. :)

James Barnett
James Barnett
39,199 Points

> I've never seen it with whitespace but according to the spec, it's allowed.

Quoting escapes certain special characters that's why it's double quotes are always a good idea, even if no longer required by the spec.

details: http://www.webdirections.org/blog/five-reasons-why-you-should-quote-attribute-values-in-html5/

James,

Thanks for the link. I always use quotes myself. I should have mentioned in my comment that quotes are recommended.

daniela
daniela
2,629 Points

I got a mention that came up on my Forum Notification area (the gray bell on the right side of the screen). So basically to mention someone, I should use the @ symbol like other social websites. Good to know! Thanks for the info!

Nathaniel Quashie
Nathaniel Quashie
4,376 Points

I also received the same error you did, Daniela - I am just glad someone was able to clarify what was wrong.

Also, I received an error for the line:

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

I was wondering if anyone got an error from that line of code as well?

James Barnett
James Barnett
39,199 Points

The attribute is viewport not viewpoint

Nathaniel Quashie
Nathaniel Quashie
4,376 Points

Well, that explains a lot lol, thank you for pointing that out. I saw viewport too, yet in my mind I read it as viewpoint for some reason so, that's how I ended up typing it out