Does Google Hate Web Standards?
![[ Thumbnail: Google W3C Invalidation ]](https://perishablepress.com/wp/wp-content/images/2008/google-check/google-invalidation_mid.gif)
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:
Google home-page (in)validation via W3C
Um, yeah, 64 validation errors (at the time of this writing). That’s worse than my very first website back in the days of frames and table-based design!
As much as I heart 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? Sound off in the comments below!
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
28 responses to “Does Google Hate Web Standards?”
“How much proprietary suffering would have been alleviated if previous versions of IE actually behaved according to the principles of Web Standards?”
If both IE and Netscape adhered to the standards of the time, we would never of lived through the browser wars, and may still be paying $50 bucks just to surf the web. The competition that saw many popular advances to the HTML language and surrounding technologies might not of happened as they did not necessarily follow the standards.
Although this does not cover why browser fail to follow standards written prior the release of said browsers, browsers cannot wait until a standard is written before including new technologies. And once those standards are written browser X might of got it right (according to the consortium) and browser Y is left with a shit decision, write in the correct handling and maintain the current way for backwards compatibility, overloading what should be a simple application or simply break backwards compatibility, ship a new product and wear the flack from the developers… Or in Microsoft’s case “who the fuck thought this shit up”
Thats my 2 cents again guys and just in my style no questions answered but more have arisen.
— Zemond
Yeah you have to remember if 1% of users who visit your site don’t use a modern browser, with googles scale of 750,000,000 unique visitors a day thats 7.5 million people who couldn’t see your site properly (thats equivalent the entire population of switzerland) . Even with the 0.5% who maybe use a text based browser thats 3.75 million people (thats almost the population of New Zealand).
Hi Paul, yes that is an understood point, but on the other side of the coin it is the same as saying that Web Standards are only advised for smaller, low-traffic sites. Personally, I think Google could embrace standards and still accomplish their goals. The two are not mutually exclusive.
google doesn’t have to please the google web crawler. so they can concentrate on speed and accessibility for handicapped visitors. the shown markup may be the result.
but honestly: if i was in charge of writing the google startpage, i would make it differently. it’s a question of web designer honor :-)