Google Fonts Url Break HTML5 Validation on W3.Org

Google fonts URL break HTML5 Validation on w3.org

URL encode the | (pipe characters) in the href attribute (%7C):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">

Google fonts API generates CSS 2.1 validation errors

Isn't it obvious why that doesn't validate as CSS2.1?

Google Font API is using @font-face, which isn't CSS 2.1. @font-face is currently included in the CSS Level 3 Working Draft, and also in the now deprecated CSS 2 documents. It will validate if you check it against both of these specifications, but not CSS 2.1.

W3C HTML5 Validation Issues

Warning 1:

"Attribute description not allowed on element meta at this point"

means, that you are not allowed to have an attribute called description. Examples of valid meta-tags can be found here: http://www.w3schools.com/tags/tag_meta.asp

Your tag would then look like:

<meta name="keywords" content="Quekett, restaurant, Pub, Isle of Wight, Fresh, Lobster, Crab, Seafood, Bembridge, Food, Dining, Breakfast, Lunch, Dinner, Bed and Breakfast, B&B">

The second Warning is a consequence of warning 1, you can ignore that if you have fixed number 1.

Warning 3: I don't understand what exactly you want there, so I give you the w3c recommodations on media queries: http://www.w3.org/TR/css3-mediaqueries/

Warning 4:
You have a reserved HTML Entity in your text/link. You have to escape that. Escaping in HTML means that you escape ith with the charactes &, followed by a code, and ending with ;. So & gets escaped to & since the code for the ampersand is amp.

Source: http://www.w3schools.com/html/html_entities.asp

There is an interesting Blog about the usefullness of 100% valid HTML
http://www.codinghorror.com/blog/2009/03/html-validation-does-it-matter.html

w3-include-html causing error in validation from https://validator.w3.org/

You are probably using a script offered by w3schools.com. Note that w3schools has nothing to do with W3C. It’s just a custom JavaScript that makes use of an invalid attribute which likely gets replaced after the JS got executed.

The W3C HTML validator doesn’t execute JavaScript, so it doesn’t see the document after the JS replaced the attribute.

Possible solutions:

• If you want to validate your HTML after the JavaScript got executed, you could open your page in a browser, mark everything, open the source code for the selection, and copy-paste this markup into the W3C validator.

• If you just want to have a valid document before/without executing the JavaScript, you could change the script to use a data-* attribute, e.g., data-include-html.

• If you want to support users and bots/services that don’t execute JavaScript, you shouldn’t rely on JavaScript. Using a server-side programming language (like PHP) could help here, but (depending on your use case) you could also just generate plain static HTML files, e.g., with the help of a static site generator.

Why are my Google fonts not working?

The URL itself explains why it's not working - Google do not have a Trebuchet MS font.

W3C - Validate HTML5 error?

On Line 83 of your markup you have the following error:

<script stype="text/javascript">

You have misspelled the 'type' attribute as 'stype'. Correcting that should fix this error.

On Line 362 you have used 'minicolors' as the type attribute for your input element. This is an incorrect value for an input elements type attribute.

You can refer to this:
http://www.w3schools.com/html/html5_form_input_types.asp

for more information regarding input types.

---

Related Topics