Does Google Hate Web Standards?
Post #567 categorized as Standards, Websites, last updated on Jun 22, 2008
Tagged with css, google, markup, Standards, validation, web, xhtml
Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<link href="http://www.google.com/google.css" type="text/css" rel="stylesheet" media="screen" />
<script src="http://www.google.com/google.js" type="text/javascript"></script>
</head>
<body>
<p><strong>Web</strong></p>
<ul id="menu">
<li><a href="http://images.google.com/imghp?hl=en&tab=wi">Images</a></li>
<li><a href="http://maps.google.com/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://news.google.com/nwshp?hl=en&tab=wn">News</a></li>
<li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Shopping</a></li>
<li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Gmail</a></li>
<li>more
<ul>
<li><a href="http://video.google.com/?hl=en&tab=wv">Video</a></li>
<li><a href="http://groups.google.com/grphp?hl=en&tab=wg">Groups</a></li>
<li><a href="http://books.google.com/bkshp?hl=en&tab=wp">Books</a></li>
<li><a href="http://scholar.google.com/schhp?hl=en&tab=ws">Scholar</a></li>
<li><a href="http://finance.google.com/finance?hl=en&tab=we">Finance</a></li>
<li><a href="http://blogsearch.google.com/?hl=en&tab=wb">Blogs</a></li>
<li><a href="http://www.youtube.com/?hl=en&tab=w1">YouTube</a></li>
<li><a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a></li>
<li><a href="http://picasaweb.google.com/home?hl=en&tab=wq">Photos</a></li>
<li><a href="http://docs.google.com/?hl=en&tab=wo">Documents</a></li>
<li><a href="http://www.google.com/reader/view/?hl=en&tab=wy">Reader</a></li>
<li><a href="http://www.google.com/intl/en/options/">even more</a></li>
</ul>
</li>
</ul>
<ul id="login">
<li><a href="http://www.google.com/url">iGoogle</a></li>
<li><a href="https://www.google.com/accounts/Login">Sign in</a></li>
</ul>
<div id="logo">
<a href="http://www.google.com/help/ig/art/index.html#name=koons">
<img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242">
</a>
</div>
<div id="search">
<form action="/search" name="f">
<input name="hl" value="en" type="hidden" />
<input maxlength="2048" name="q" size="55" title="Google Search" value="" />
<input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit" />
</form>
</div>
<ul id="tools">
<li><a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a></li>
<li><a href="http://www.google.com/preferences?hl=en">Preferences</a></li>
<li><a href="http://www.google.com/language_tools?hl=en">Language Tools</a></li>
</ul>
<p>What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/">iGoogle Artist Themes</a></p>
<ul id="extra">
<li><a href="http://www.google.com/intl/en/ads/">Advertising Programs</a></li>
<li><a href="http://www.google.com/services/">Business Solutions</a></li>
<li><a href="http://www.google.com/intl/en/about.html">About Google</a></li>
</ul>
<p><small>© 2008 Google</small></p>
</body>
</html>
Mmmm, nice and clean, or at least pretty close to it. Semantic markup, separation of structure, presentation, and behavior — you know, all the stuff that makes Web Standards so great. Unfortunately, the world’s most popular web page looks nothing like this. Instead of acknowledging, embracing, and supporting Web Standards, the Google home page is as abominable as Microsoft’s IE 404 Error Page. From inline styles and obtrusive JavaScript to non-semantic markup and table-based layout, the fun and simple Google home page is actually a big stinking bowl of tag soup in disguise:
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title><style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;height:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}.pgtab:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px}.pgtabside{width:3px;background-position:-404px 0}.ptr{cursor:pointer;cursor:hand}.iconl{background:url() no-repeat;overflow:hidden;height:px;width:px}#gbar{float:left;height:22px;padding-left:2px}.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#guser{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:absolute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style><script>window.google={kEI:"tuMYSLXoO6T-gwPi3oz5Cw",kEXPI:"17259,17735,17866",kHL:"en"};
function sf(){document.f.q.focus()}
window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=tuMYSLXoO6T-gwPi3oz5Cw"+g}return true};
window.gbar={};(function(){var c=window.gbar,e,g,h;c.qs=function(a){var d=window.encodeURIComponent&&(document.forms[0].q||"").value;if(d)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(f,b){return(b||"&")+"q="+encodeURIComponent(d)})};function l(a,d,f){a.display=h?"none":"block";a.left=d+"px";a.top=f+"px"}c.tg=function(a){var d=0,f=0,b,m=0,n,j=window.navExtra,k,i=document;g=g||i.getElementById("gbar").getElementsByTagName("span");(a||window.event).cancelBubble=!m;if(!e){e=i.createElement(Array.every||window.createPopup?"iframe":"DIV");e.frameBorder="0";e.scrolling="no";e.src="#";g[7].parentNode.appendChild(e).id="gbi";if(j&&g[7])for(n in j){k=i.createElement("span");k.appendChild(j[n]);g[7].parentNode.insertBefore(k,g[7]).className="gb2"}i.onclick=c.close}while(b=g[++m]){if(f){l(b.style,f+1,d+25);d+=b.firstChild.tagName=="DIV"?9:20}if(b.className=="gb3"){do f+=b.offsetLeft;while(b=b.offsetParent)}}e.style.height=d+"px";l(e.style,f,24);h=!h};c.close=function(a){h&&c.tg(a)}})();</script></head><body onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin="3" alink="#ff0000" bgcolor="#ffffff" link="#0000cc" marginheight="3" text="#000000" vlink="#551a8b"><div id="gbar"><nobr><span class="gb1"><b>Web</b></span> <span class="gb1"><a href="http://images.google.com/imghp?hl=en&tab=wi" onclick="gbar.qs(this)">Images</a></span> <span class="gb1"><a href="http://maps.google.com/maps?hl=en&tab=wl" onclick="gbar.qs(this)">Maps</a></span> <span class="gb1"><a href="http://news.google.com/nwshp?hl=en&tab=wn" onclick="gbar.qs(this)">News</a></span> <span class="gb1"><a href="http://www.google.com/prdhp?hl=en&tab=wf" onclick="gbar.qs(this)">Shopping</a></span> <span class="gb1"><a href="http://mail.google.com/mail/?hl=en&tab=wm">Gmail</a></span> <span class="gb3"><a href="http://www.google.com/intl/en/options/" onclick="this.blur();gbar.tg(event);return !1"><u>more</u> <small>▼</small></a></span> <span class="gb2"><a href="http://video.google.com/?hl=en&tab=wv" onclick="gbar.qs(this)">Video</a></span> <span class="gb2"><a href="http://groups.google.com/grphp?hl=en&tab=wg" onclick="gbar.qs(this)">Groups</a></span> <span class="gb2"><a href="http://books.google.com/bkshp?hl=en&tab=wp" onclick="gbar.qs(this)">Books</a></span> <span class="gb2"><a href="http://scholar.google.com/schhp?hl=en&tab=ws" onclick="gbar.qs(this)">Scholar</a></span> <span class="gb2"><a href="http://finance.google.com/finance?hl=en&tab=we" onclick="gbar.qs(this)">Finance</a></span> <span class="gb2"><a href="http://blogsearch.google.com/?hl=en&tab=wb" onclick="gbar.qs(this)">Blogs</a></span> <span class="gb2"><div></div></span> <span class="gb2"><a href="http://www.youtube.com/?hl=en&tab=w1" onclick="gbar.qs(this)">YouTube</a></span> <span class="gb2"><a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a></span> <span class="gb2"><a href="http://picasaweb.google.com/home?hl=en&tab=wq" onclick="gbar.qs(this)">Photos</a></span> <span class="gb2"><a href="http://docs.google.com/?hl=en&tab=wo">Documents</a></span> <span class="gb2"><a href="http://www.google.com/reader/view/?hl=en&tab=wy">Reader</a></span> <span class="gb2"><div></div></span> <span class="gb2"><a href="http://www.google.com/intl/en/options/">even more »</a></span> </nobr></div><div class="gbh" style="left: 0pt;"></div><div class="gbh" style="right: 0pt;"></div><div id="guser" style="padding: 0pt 0pt 4px; font-size: 84%;" width="100%" align="right"><nobr><a href="http://www.google.com/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&hl=en">Sign in</a></nobr></div><center><br id="lgpd" clear="all"><a href="http://www.google.com/help/ig/art/index.html#name=koons"><img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242"></a><br><br><form action="/search" name="f"><table cellpadding="0" cellspacing="0"><tbody><tr valign="top"><td width="25%"> </td><td align="center" nowrap="nowrap"><input name="hl" value="en" type="hidden"><input maxlength="2048" name="q" size="55" title="Google Search" value=""><br><input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit"></td><td nowrap="nowrap" width="25%"><font size="-2"> <a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a><br> <a href="http://www.google.com/preferences?hl=en">Preferences</a><br> <a href="http://www.google.com/language_tools?hl=en">Language Tools</a></font></td></tr></tbody></table></form><br><font size="-1">What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/" onmousedown="return clk(this.href,'promos','hppweb:en_us','pro','1','')">iGoogle Artist Themes</a></font><br><br><br><font size="-1"><a href="http://www.google.com/intl/en/ads/">Advertising Programs</a> - <a href="http://www.google.com/services/">Business Solutions</a> - <a href="http://www.google.com/intl/en/about.html">About Google</a></font><p><font size="-2">©2008 Google</font></p></center></body></html>
Of course, this is obviously the compressed/optimized version of the document, shared here mostly for the shock value. How bad is the uncompressed version? After taking the time to tab it all out, I almost cried. Check out the sadness for yourself:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;height:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png) no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px 0}.pgtab:hover{width:130px;background-position:-144px 0}.pgtabselected{width:144px}.pgtabside{width:3px;background-position:-404px 0}.ptr{cursor:pointer;cursor:hand}.iconl{background:url() no-repeat;overflow:hidden;height:px;width:px}#gbar{float:left;height:22px;padding-left:2px}.gbh,.gb2 div{border-top:1px solid #c9d7f1;font-size:0;height:0}.gbh{position:absolute;top:24px;width:100%}.gb2 div{margin:5px}#gbi{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;font-size:13px;top:24px;z-index:1000}#guser{padding-bottom:7px !important}#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.73em;vertical-align:top}.gb2 a,.gb2 b{display:block;padding:.2em .5em}}#gbi,.gb2{display:none;position:absolute;width:8em}.gb2{z-index:1001}#gbar a{color:#00c}.gb2 a,.gb3 a{text-decoration:none}#gbar .gb2 a:hover{background:#36c;color:#fff;display:block}</style>
<script>window.google={kEI:"tuMYSLXoO6T-gwPi3oz5Cw",kEXPI:"17259,17735,17866",kHL:"en"};
function sf(){document.f.q.focus()}
window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=tuMYSLXoO6T-gwPi3oz5Cw"+g}return true};
window.gbar={};(function(){var c=window.gbar,e,g,h;c.qs=function(a){var d=window.encodeURIComponent&&(document.forms[0].q||"").value;if(d)a.href=a.href.replace(/([?&])q=[^&]*|$/,function(f,b){return(b||"&")+"q="+encodeURIComponent(d)})};function l(a,d,f){a.display=h?"none":"block";a.left=d+"px";a.top=f+"px"}c.tg=function(a){var d=0,f=0,b,m=0,n,j=window.navExtra,k,i=document;g=g||i.getElementById("gbar").getElementsByTagName("span");(a||window.event).cancelBubble=!m;if(!e){e=i.createElement(Array.every||window.createPopup?"iframe":"DIV");e.frameBorder="0";e.scrolling="no";e.src="#";g[7].parentNode.appendChild(e).id="gbi";if(j&&g[7])for(n in j){k=i.createElement("span");k.appendChild(j[n]);g[7].parentNode.insertBefore(k,g[7]).className="gb2"}i.onclick=c.close}while(b=g[++m]){if(f){l(b.style,f+1,d+25);d+=b.firstChild.tagName=="DIV"?9:20}if(b.className=="gb3"){do f+=b.offsetLeft;while(b=b.offsetParent)}}e.style.height=d+"px";l(e.style,f,24);h=!h};c.close=function(a){h&&c.tg(a)}})();</script>
</head>
<body onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin="3" alink="#ff0000" bgcolor="#ffffff" link="#0000cc" marginheight="3" text="#000000" vlink="#551a8b">
<div id="gbar">
<nobr>
<span class="gb1">
<b>Web</b>
</span>
<span class="gb1">
<a href="http://images.google.com/imghp?hl=en&tab=wi" onclick="gbar.qs(this)">Images</a>
</span>
<span class="gb1">
<a href="http://maps.google.com/maps?hl=en&tab=wl" onclick="gbar.qs(this)">Maps</a>
</span>
<span class="gb1">
<a href="http://news.google.com/nwshp?hl=en&tab=wn" onclick="gbar.qs(this)">News</a>
</span>
<span class="gb1">
<a href="http://www.google.com/prdhp?hl=en&tab=wf" onclick="gbar.qs(this)">Shopping</a>
</span>
<span class="gb1">
<a href="http://mail.google.com/mail/?hl=en&tab=wm">Gmail</a>
</span>
<span class="gb3">
<a href="http://www.google.com/intl/en/options/" onclick="this.blur();gbar.tg(event);return !1"><u>more</u> <small>▼</small></a>
</span>
<span class="gb2">
<a href="http://video.google.com/?hl=en&tab=wv" onclick="gbar.qs(this)">Video</a>
</span>
<span class="gb2">
<a href="http://groups.google.com/grphp?hl=en&tab=wg" onclick="gbar.qs(this)">Groups</a>
</span>
<span class="gb2">
<a href="http://books.google.com/bkshp?hl=en&tab=wp" onclick="gbar.qs(this)">Books</a>
</span>
<span class="gb2">
<a href="http://scholar.google.com/schhp?hl=en&tab=ws" onclick="gbar.qs(this)">Scholar</a>
</span>
<span class="gb2">
<a href="http://finance.google.com/finance?hl=en&tab=we" onclick="gbar.qs(this)">Finance</a>
</span>
<span class="gb2">
<a href="http://blogsearch.google.com/?hl=en&tab=wb" onclick="gbar.qs(this)">Blogs</a>
</span>
<span class="gb2">
<div></div>
</span>
<span class="gb2">
<a href="http://www.youtube.com/?hl=en&tab=w1" onclick="gbar.qs(this)">YouTube</a>
</span>
<span class="gb2">
<a href="http://www.google.com/calendar/render?hl=en&tab=wc">Calendar</a>
</span>
<span class="gb2">
<a href="http://picasaweb.google.com/home?hl=en&tab=wq" onclick="gbar.qs(this)">Photos</a>
</span>
<span class="gb2">
<a href="http://docs.google.com/?hl=en&tab=wo">Documents</a>
</span>
<span class="gb2">
<a href="http://www.google.com/reader/view/?hl=en&tab=wy">Reader</a>
</span>
<span class="gb2">
<div></div>
</span>
<span class="gb2">
<a href="http://www.google.com/intl/en/options/">even more »</a>
</span>
</nobr>
</div>
<div class="gbh" style="left: 0pt;"></div>
<div class="gbh" style="right: 0pt;"></div>
<div id="guser" style="padding: 0pt 0pt 4px; font-size: 84%;" width="100%" align="right">
<nobr>
<a href="http://www.google.com/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> |
<a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&hl=en">Sign in</a>
</nobr>
</div>
<center>
<br id="lgpd" clear="all">
<a href="http://www.google.com/help/ig/art/index.html#name=koons">
<img src="http://www.google.com/jeffkoons.gif" alt="By Jeff Koons" title="By Jeff Koons" border="0" height="145" width="242">
</a>
<br>
<br>
<form action="/search" name="f">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr valign="top">
<td width="25%"> </td>
<td align="center" nowrap="nowrap">
<input name="hl" value="en" type="hidden"><input maxlength="2048" name="q" size="55" title="Google Search" value="">
<br>
<input name="btnG" value="Google Search" type="submit"><input name="btnI" value="I'm Feeling Lucky" type="submit">
</td>
<td nowrap="nowrap" width="25%">
<font size="-2">
<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a>
<br>
<a href="http://www.google.com/preferences?hl=en">Preferences</a>
<br>
<a href="http://www.google.com/language_tools?hl=en">Language Tools</a>
</font>
</td>
</tr>
</tbody>
</table>
</form>
<br>
<font size="-1">
What happens when great art mixes with your homepage? <a href="http://www.google.com/help/ig/art/" onmousedown="return clk(this.href,'promos','hppweb:en_us','pro','1','')">iGoogle Artist Themes</a>
</font>
<br>
<br>
<br>
<font size="-1">
<a href="http://www.google.com/intl/en/ads/">Advertising Programs</a> -
<a href="http://www.google.com/services/">Business Solutions</a> -
<a href="http://www.google.com/intl/en/about.html">About Google</a>
</font>
<p>
<font size="-2">
©2008 Google
</font>
</p>
</center>
</body>
</html>
Eeeewww. Lots to discuss here, but I will try to summarize with a simple screenshot:
![[ Thumbnail: Google W3C Invalidation ]](http://perishablepress.com/press/wp-content/images/2008/google-check/google-invalidation_small.gif)
Google home-page (in)validation via W3C
Um, yeah, 64 validation errors. That’s worse than my very first site! As much as I love Google (cough), I hate to see their blatant, high-profile disregard for Web Standards. Does Google hate Web Standards? Probably not, but it obviously ranks mighty low on their list of priorities. What if everyone were to follow the leader and design their web pages like Google? Assuming Google knows what they’re doing, does this mean that Web Standards aren’t effective, useful, or practical? Does it all come down to money? What do you think? Should Google embrace Web Standards or continue with business as usual?
Share this..
Related articles
- Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign
- Google Analytics Invitation
- Allow Google Reader to Access Hotlink-Protected Images
- Smooth Operators: Sharpen your Google Search Skills
- SEO Experiment: Let Google Sort it Out
- Optimizing Google Analytics Performance
- Seven Ways to Beef Up Your Best Pages for the Next Google PR Update
#1 — Louis
I assume that Google cryptic markup is responsible for the homepage surreal loading time performances.
There is very little interest for them to have semantic content, but speed is their very first priority (and search relevance, of course).
Altough, I would like Google to serve the markup you show, it’s gorgeous.