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

Watch Video

Posted March 25, 2014 9:11am by

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

March 25, 2014 10:00am

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.

March 25, 2014 10:16am

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

March 28, 2014 6:24am

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.

March 28, 2014 6:25am

Tagging Nick Pettit to let him know about this issue.

March 28, 2014 6:36am

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?

March 28, 2014 6:44am

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

March 28, 2014 6:53am

James Barnett

I linked using the markdown syntax.

Did you get a mention?

March 28, 2014 6:57am

Jason Anello -

> Did you get a mention?

Nope.

March 28, 2014 7:03am

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

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

March 31, 2014 2:41pm

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.

March 25, 2014 9:15am

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.

March 25, 2014 9:22am

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!

March 25, 2014 9:27am

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

March 25, 2014 10:15am

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.

March 25, 2014 10:19am

File extension should be .jpg

I can 't seem to edit comments on here.

March 25, 2014 10:25am

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. :)

March 28, 2014 6:30am

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

March 28, 2014 6:49am

James,

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

March 25, 2014 10:38am

Thanks Jason! Good to know!

March 28, 2014 8:32pm

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!

March 28, 2014 9:09pm

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?

March 28, 2014 9:44pm

The attribute is viewport not viewpoint

March 29, 2014 10:33am

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

daniela

daniela

Error during the W3C Markup Validation

6 Answers

Jason Anello

Jason Anello

daniela

daniela

James Barnett

James Barnett

James Barnett

James Barnett

Jason Anello

Jason Anello

James Barnett

James Barnett

Jason Anello

Jason Anello

James Barnett

James Barnett

Jason Anello

Jason Anello

Nick Pettit

Nick Pettit

Justin Hunter

Justin Hunter

daniela

daniela

Justin Hunter

Justin Hunter

Jason Anello

Jason Anello

Jason Anello

Jason Anello

daniela

daniela

James Barnett

James Barnett

Jason Anello

Jason Anello

Justin Hunter

Justin Hunter

daniela

daniela

Nathaniel Quashie

Nathaniel Quashie

James Barnett

James Barnett

Nathaniel Quashie

Nathaniel Quashie