Does Google Hate Web Standards?

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&amp;tab=wi">Images</a></li>
			<li><a href="http://maps.google.com/maps?hl=en&amp;tab=wl">Maps</a></li>
			<li><a href="http://news.google.com/nwshp?hl=en&amp;tab=wn">News</a></li>
			<li><a href="http://www.google.com/prdhp?hl=en&amp;tab=wf">Shopping</a></li>
			<li><a href="http://mail.google.com/mail/?hl=en&amp;tab=wm">Gmail</a></li>
			<li>more
				<ul>
					<li><a href="http://video.google.com/?hl=en&amp;tab=wv">Video</a></li>
					<li><a href="http://groups.google.com/grphp?hl=en&amp;tab=wg">Groups</a></li>
					<li><a href="http://books.google.com/bkshp?hl=en&amp;tab=wp">Books</a></li>
					<li><a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws">Scholar</a></li>
					<li><a href="http://finance.google.com/finance?hl=en&amp;tab=we">Finance</a></li>
					<li><a href="http://blogsearch.google.com/?hl=en&amp;tab=wb">Blogs</a></li>
					<li><a href="http://www.youtube.com/?hl=en&amp;tab=w1">YouTube</a></li>
					<li><a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a></li>
					<li><a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq">Photos</a></li>
					<li><a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a></li>
					<li><a href="http://www.google.com/reader/view/?hl=en&amp;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&nbsp;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>&copy; 2008 Google</small></p>
	</body>
</html>

See text version of this code

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&amp;tab=wi" onclick="gbar.qs(this)">Images</a></span> <span class="gb1"><a href="http://maps.google.com/maps?hl=en&amp;tab=wl" onclick="gbar.qs(this)">Maps</a></span> <span class="gb1"><a href="http://news.google.com/nwshp?hl=en&amp;tab=wn" onclick="gbar.qs(this)">News</a></span> <span class="gb1"><a href="http://www.google.com/prdhp?hl=en&amp;tab=wf" onclick="gbar.qs(this)">Shopping</a></span> <span class="gb1"><a href="http://mail.google.com/mail/?hl=en&amp;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>&#9660;</small></a></span> <span class="gb2"><a href="http://video.google.com/?hl=en&amp;tab=wv" onclick="gbar.qs(this)">Video</a></span> <span class="gb2"><a href="http://groups.google.com/grphp?hl=en&amp;tab=wg" onclick="gbar.qs(this)">Groups</a></span> <span class="gb2"><a href="http://books.google.com/bkshp?hl=en&amp;tab=wp" onclick="gbar.qs(this)">Books</a></span> <span class="gb2"><a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws" onclick="gbar.qs(this)">Scholar</a></span> <span class="gb2"><a href="http://finance.google.com/finance?hl=en&amp;tab=we" onclick="gbar.qs(this)">Finance</a></span> <span class="gb2"><a href="http://blogsearch.google.com/?hl=en&amp;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&amp;tab=w1" onclick="gbar.qs(this)">YouTube</a></span> <span class="gb2"><a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a></span> <span class="gb2"><a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq" onclick="gbar.qs(this)">Photos</a></span> <span class="gb2"><a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a></span> <span class="gb2"><a href="http://www.google.com/reader/view/?hl=en&amp;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 &raquo;</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&amp;pref=ig&amp;pval=3&amp;q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&amp;usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&amp;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%">&nbsp;</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">&nbsp;&nbsp;<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a><br>&nbsp;&nbsp;<a href="http://www.google.com/preferences?hl=en">Preferences</a><br>&nbsp;&nbsp;<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&nbsp;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&amp;tab=wi" onclick="gbar.qs(this)">Images</a>
				</span>
				<span class="gb1">
					<a href="http://maps.google.com/maps?hl=en&amp;tab=wl" onclick="gbar.qs(this)">Maps</a>
				</span>
				<span class="gb1">
					<a href="http://news.google.com/nwshp?hl=en&amp;tab=wn" onclick="gbar.qs(this)">News</a>
				</span>
				<span class="gb1">
					<a href="http://www.google.com/prdhp?hl=en&amp;tab=wf" onclick="gbar.qs(this)">Shopping</a>
				</span>
				<span class="gb1">
					<a href="http://mail.google.com/mail/?hl=en&amp;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>&#9660;</small></a>
				</span> 
				<span class="gb2">
					<a href="http://video.google.com/?hl=en&amp;tab=wv" onclick="gbar.qs(this)">Video</a>
				</span>
				<span class="gb2">
					<a href="http://groups.google.com/grphp?hl=en&amp;tab=wg" onclick="gbar.qs(this)">Groups</a>
				</span>
				<span class="gb2">
					<a href="http://books.google.com/bkshp?hl=en&amp;tab=wp" onclick="gbar.qs(this)">Books</a>
				</span>
				<span class="gb2">
					<a href="http://scholar.google.com/schhp?hl=en&amp;tab=ws" onclick="gbar.qs(this)">Scholar</a>
				</span>
				<span class="gb2">
					<a href="http://finance.google.com/finance?hl=en&amp;tab=we" onclick="gbar.qs(this)">Finance</a>
				</span>
				<span class="gb2">
					<a href="http://blogsearch.google.com/?hl=en&amp;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&amp;tab=w1" onclick="gbar.qs(this)">YouTube</a>
				</span>
				<span class="gb2">
					<a href="http://www.google.com/calendar/render?hl=en&amp;tab=wc">Calendar</a>
				</span>
				<span class="gb2">
					<a href="http://picasaweb.google.com/home?hl=en&amp;tab=wq" onclick="gbar.qs(this)">Photos</a>
				</span>
				<span class="gb2">
					<a href="http://docs.google.com/?hl=en&amp;tab=wo">Documents</a>
				</span>
				<span class="gb2">
					<a href="http://www.google.com/reader/view/?hl=en&amp;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 &raquo;</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&amp;pref=ig&amp;pval=3&amp;q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&amp;usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | 
				<a href="https://www.google.com/accounts/Login?continue=http://www.google.com/&amp;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%">&nbsp;</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">
									&nbsp;&nbsp;
									<a href="http://www.google.com/advanced_search?hl=en">Advanced Search</a>
									<br>
									&nbsp;&nbsp;
									<a href="http://www.google.com/preferences?hl=en">Preferences</a>
									<br>&nbsp;&nbsp;
									<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&nbsp;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>

See text version of this code

Eeeewww. Lots to discuss here, but I will try to summarize with a simple screenshot:

[ Thumbnail: Google W3C Invalidation ]
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?