Mark-up Validation Error

MDN Learn
#1

I was doing this assessment Structuring a page of content - Learn web development | MDN


After completion of the assessment, I put my code on The W3C Markup Validation Service
https://validator.w3.org/
I’m getting this error.

Error: Bad value https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700 for attribute href on element link: Illegal character in query: | is not allowed.

From line 7, column 5; to line 7, column 117

ud">	↩    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">↩	<lin

Could someone explain to me what is the meaning of this?

#2

So, in the URL https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700, the bit after the question mark is called a query string. When we make a request using this URL, the Google Fonts servers grab this information and use it to work out which fonts we are requesting.

Strictly speaking, the pipe (|) character isn’t allowed in a query string — this causes the validator to spit out the message you are getting.

But in actual fact, Google are using it as a separator to separate out multiple fonts in a single query parameter, and it works fine.

This is an important thing to note about the W3C validator — it is a useful tool to use for finding problems in your HTML code, but you won’t always be able to validate everything 100%, all the time, especially if you are relying on 3rd party code, as we are in this case. It is only an indicator, and not the gospel.

1 Like
#3

Thanks for the clarification, though wasn’t expecting that Google and W3C have the different protocol.

#4

It is not a different protocol as such. HTML is often referred to as a “permissive language”, meaning that there are rules and guidelines on how it should be written, but some of them can be ignored and your code will still work.

Some web developers choose to ignore certain rules and do things their own way, for better or for worse.