From:  Chris Mills <cmills@mozilla.com>
Date:  02 Mar 2017 21:12:54 Hong Kong Time
Newsgroup:  news.mozilla.org/mozilla.dev.mdc
Subject:  

Re: Confusion in syntax of HTML assessment

NNTP-Posting-Host:  63.245.214.181

> On 2 Mar 2017, at 12:55, Mohammad Rahman  wrote:
> 
> Hello
> 
> On this page's assessment Assessment Structuring a page of content
> 
> 
> In the .html file the following code at
> https://validator.w3.org/nu/#textarea W# Validator
>  gives the error
> 
>  rel='stylesheet' type='text/css'>
>    
> 
> *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 6, column 6; to line 6, column 134
> 
> 
> tle>↩  rel='stylesheet' type='text/css'>↩ <
> 

So, we try to encourage people to write HTML that is as valid as possible, but you’ll find that lots of developers don’t produce complete valid code, either because they are lazy, or because the thing they are trying to do works, but doesn’t completely validate. 

Validation is only a means to an end - a tool to help make code better and catch mistakes. It is not a 100% measure of success or code quality.

Google fonts is using a pipe character here to separate out multiple font families, which looks like it doesn’t strictly validate, but it works for them.

> 
> but if I change the | to %7 it works…why?

So this is interesting.

The URL escape code[0] for a pipe character is %7C. So if you replace | with %7, you are actually ending up with a URL that translates to 

https://fonts.googleapis.com/css?family=Roboto+Condensed:300|inzel+Decorative:700

Note the missing C at the end of Cinzel. Did both fonts apply when you tried this? If not, try replacing | with %7C instead.

Hope this helps!

Chris Mills
 Senior tech writer || Mozilla
developer.mozilla.org || MDN
 cmills@mozilla.com || @chrisdavidmills

[0] https://www.werockyourweb.com/url-escape-characters/