2009-09-08 - Google doesn't validate so why should I waste my time validating?
I've heard that type of response from too many people over the years. And you know what? I'm tired of hearing that as an excuse for ignoring website validation and adherence to protocols. Let's see if we can figure out why a forward thinking technical giant like Google cannot get their home page to validate.
2009-09-16 - Michael Thingmand from Denmark asks: Why doesn't google.com validate (according to W3C)?
As of 2009-09-08 at 06:00, Google's home page has 39 Errors and 2 Warnings.
URI Short: http://Twuna.com/V/Google (Option Selected: Group Error Messages by Type)
Errors 1 through 7 refer to invalid attributes being used on the <body> Element. Google is validating against an HTML5 DOCTYPE and these attributes have long been deprecated in favor of CSS. Can someone give me a valid reason why Google still utilize this method?
Note: I've kept the Error reasons intact. I have reformatted the actual code example for each Error so you can easily see what the W3 Validator is flagging as an error. Since Google remove all white space within HTML, you'll see ALL error references at Line 7, note the column numbers.
Line 0, column 0: Using windows-1252 instead of the declared encoding iso-8859-1.
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
What you are viewing above is a cascade of errors ALL occurring from the <body> Element which is the first group of errors encountered. These are all Deprecated HTML Attributes which have long been replaced by CSS. They do not exist in the HTML5 Attributes, Google use an HTML5 DOCTYPE.
<body>The following CSS equivalents are usually the recommended replacements for the above 7 HTML errors. The topmargin and marginheight attributes were inline presentation kludges to deal with an IE/Netscape ongoing proprietary code battle, back then. This is now!
Note: Internet Explorer supports topmargin, leftmargin, bottommargin, and rightmargin attributes. Netscape Navigator supports marginheight and marginwidth attributes on the <body> Element.
body {
margin: .3em;
padding: 0;
color: #000;
background: #fff;
}
a:link {
color: #00c;
}
a:visited {
color: #551a8b;
}
a:active {
color: #f00;
}
<div id=gbar>
<nobr>
<a href="">Web</a>
<a href="">Images</a>
<a href="">Videos</a>
<a href="">Maps</a>
<a href="">News</a>
<a href="">Shopping</a>
<a href="">Gmail</a>
<a href=""><u>more</u> »</a>
</nobr>
</div>
DTD NOTE: The only DTD to include this element is the Internet Explorer 3.0 DTD - It incorrectly treats it as a stand-alone element even though both Netscape's original description and observed behavior for both Internet Explorer and Netscape show it is definitely a container element.
Utilize a CSS1 Property and apply it to the applicable #gbar CSS Rule(s).
#gbar {
white-space: nowrap;
}
Invalid: <a href="http://images.google.com/imghp?hl=en&tab=wi" class=gb1>Images</a>
Valid: <a href="http://images.google.com/imghp?hl=en&tab=wi" class=gb1>Images</a>
Invalid: <a href="http://video.google.com/?hl=en&tab=wv" class=gb1>Videos</a>
Valid: <a href="http://video.google.com/?hl=en&tab=wv" class=gb1>Videos</a>
Invalid: <a href="http://maps.google.com/maps?hl=en&tab=wl" class=gb1>Maps</a>
Valid: <a href="http://maps.google.com/maps?hl=en&tab=wl" class=gb1>Maps</a>
Invalid: <a href="http://news.google.com/nwshp?hl=en&tab=wn" class=gb1>News</a>
Valid: <a href="http://news.google.com/nwshp?hl=en&tab=wn" class=gb1>News</a>
Invalid: <a href="http://www.google.com/prdhp?hl=en&tab=wf" class=gb1>Shopping</a>
Valid: <a href="http://www.google.com/prdhp?hl=en&tab=wf" class=gb1>Shopping</a>
Invalid: <a href="http://mail.google.com/mail/?hl=en&tab=wm" class=gb1>Gmail</a>
Valid: <a href="http://mail.google.com/mail/?hl=en&tab=wm" class=gb1>Gmail</a>
Invalid: <a href="http://www.google.com/intl/en/options/" class=gb3><u>more</u> »</a>
Valid: <a href="http://www.google.com/intl/en/options/" class=gb3>more »</a>
Note: I have to wonder why the obsolete <u> element is being used to underline an anchor element which is already underlined by default? This one escapes me. All I did was remove the <u></u> element to make it valid. Can someone please explain this one to me, what am I missing?
Invalid: <div id=guser width=100%><nobr>
widthUtilize a Width Property and apply it to the applicable #guser CSS Rule(s).
#guser {
width: 100%;
}
Invalid: <div id=guser width=100%><nobr>
<nobr>Utilize a CSS1 Property and apply it to the applicable #guser CSS Rule(s).
#guser {
white-space: nowrap;
}
Invalid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Valid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Invalid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Valid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Invalid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Valid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Invalid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Valid: <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a>
Invalid: <a href="https://www.google.com/accounts/Login?hl=en&continue=http://www.google.com/">Sign in</a>
Valid: <a href="https://www.google.com/accounts/Login?hl=en&continue=http://www.google.com/">Sign in</a>
<center><br clear=all id=lgpd>
<center>There are various CSS methods to achieve centering, utilize one or more of them and eliminate the obsolete <center> elements.
<center><br clear=all id=lgpd>
<img alt="Google" height=110 src="/intl/en_ALL/images/logo.gif" width=276 id=logo onload="window.lol&&lol()">
<table cellpadding=0 cellspacing=0>
cellpaddingUtilize CSS to control presentation of <table> elements e.g.
#foo table {
margin: 0;
padding: 0;
border-collapse: collapse;
}
<table cellpadding=0 cellspacing=0>
cellspacingUtilize CSS to control presentation of <table> elements e.g.
#foo table {
margin: 0;
padding: 0;
border-collapse: collapse;
}
<tr valign=top>
valignUtilize CSS to control presentation of <tr> elements e.g.
#foo tr {
vertical-align: top;
}
<td width=25%>
widthUtilize CSS to control presentation of <td> elements e.g.
#foo td {
width: 25%;
}
<td align=center nowrap>
alignUtilize CSS to control presentation of <td> elements e.g.
#foo td {
text-align: center;
}
<td align=center nowrap>
nowrapUtilize CSS to control presentation of <td> elements e.g.
#foo td {
white-space: nowrap;
}
<td nowrap width=25% align=left>
nowrapUtilize CSS to control presentation of <td> elements e.g.
#foo td {
white-space: nowrap;
}
<td nowrap width=25% align=left>
widthUtilize CSS to control presentation of <td> elements e.g.
#foo td {
width: 25%;
}
<td nowrap width=25% align=left>
alignUtilize CSS to control presentation of <td> elements e.g.
#foo td {
text-align: center;
}
<font size=-2>
<font>Utilize CSS to control presentation of content. The <font> element was a staple from the 90s.
Invalid: <a href=/advanced_search?hl=en>Advanced Search</a>
Valid: <a href="/advanced_search?hl=en">Advanced Search</a>
Invalid: <a href=/language_tools?hl=en>Language Tools</a>
Valid: <a href="/language_tools?hl=en">Language Tools</a>
<font size=-1><a href="/intl/en/ads/">Advertising Programs</a>
<font>Utilize CSS to control presentation of content. The <font> element was a staple from the 90s.
<font size=-2> <a href=/advanced_search?hl=en>Advanced Search</a>
<font>Utilize CSS to control presentation of content. The <font> element was a staple from the 90s.
So, Why Doesn't Google Validate?After going through the above validation routine line by line, I'm left wondering why Google have chosen to mix and mash various coding styles while using an HTML5 DOCTYPE. Based on the HTML markup Google have chosen, the HTML 4.01 Transitional DOCTYPE would be more suitable.
You can clearly see where the argument for less bytes comes into play. Yes, there is added size to the overall equation based on the above suggestions. Since I don't fully understand how the Google home page is being dynamically served, some of my observations may not take into consideration the bigger picture. If that is the case, then a different DOCTYPE would be suggested and/or a customized Google DTD.
When I peruse the embedded <style>s within the <head></head> section of Google's home page, I'm left wondering if the Less Bytes argument holds water? Why can't the appropriate CSS properties be added to the embedded <style> element?
Is it possible that Google is appealing to the absolute least common denominator? Even so, based on my understanding of the specifications and current technologies, I think someone is just holding on to some last minute originality stuff. We know that Google is intent on not changing their home page. I'm guessing that same methodology applies to the code behind the scenes - keep it as original and 90s as possible.
For a forward thinking technical giant like Google, I'm surprised to find that the thought process at certain levels is still pre 2k when it comes to HTML Markup. I really need someone besides myself and the W3C to help me understand why Google utilize the markup that they do. And, I'd really like to know why an HTML5 DOCTYPE is being used when a notable percentage of the markup is HTML 4.01 Transitional?
What are your thoughts on why Google doesn't validate? Share them with us on Twitter and we'll see if we can't get an accurate answer to this perplexing question.
Just because Google doesn't validate, doesn't mean you shouldn't. You can't compare your website to Google so why even use them as an example? YOUR website needs every available byte of optimization that you can squeeze out of your HTML markup. Read more about The Importance of Website Validation.