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 trialdaniela
2,629 PointsError 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
Jason Anello
Courses Plus Student 94,610 PointsIt'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.
Justin Hunter
Courses Plus Student 11,484 PointsHi 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
2,629 PointsThanks 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
Courses Plus Student 11,484 PointsGood 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Jason Anello
Courses Plus Student 94,610 PointsFile extension should be .jpg
I can 't seem to edit comments on here.
daniela
2,629 PointsYup, 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
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/
Jason Anello
Courses Plus Student 94,610 PointsJames,
Thanks for the link. I always use quotes myself. I should have mentioned in my comment that quotes are recommended.
Justin Hunter
Courses Plus Student 11,484 PointsThanks Jason! Good to know!
daniela
2,629 PointsI 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
4,376 PointsI 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
39,199 PointsThe attribute is viewport
not viewpoint
Nathaniel Quashie
4,376 PointsWell, 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
daniela
2,629 Pointsdaniela
2,629 PointsThanks 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.
James Barnett
39,199 PointsJames Barnett
39,199 PointsDaniela Engstrom -
>
I am not sure if I link to Nick Pettit's Profile if it will alert himNo, you have to use an
@
in front of a person's username and then it will bring up a dropdown list.James Barnett
39,199 PointsJames Barnett
39,199 PointsTagging Nick Pettit to let him know about this issue.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsJames 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
39,199 PointsJames Barnett
39,199 PointsJason Anello -
>
are you saying that your link is the only one that will alert him that he was mentionedThat's my understanding.
We can test it right now if you reply to me and link to my profile instead of using an
@
.Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsJames Barnett
I linked using the markdown syntax.
Did you get a mention?
James Barnett
39,199 PointsJames Barnett
39,199 PointsJason Anello -
>
Did you get a mention?Nope.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsOk, 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
Treehouse TeacherNick Pettit
Treehouse TeacherHm, 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.