Last Updated - Tue Dec 05 2017

I am sure most of us have been to a carnival, amusement park or street fair where an artist is drawing caricatures. These are funny drawings that exaggerate features about your head, like your eyes, ears or hair style. Typically the person's head is drawn very large and their body really small, very out of proportion. They are a lot of fun and meant to make you laugh at yourself.

As I review the many things that have changed with the modern web I noticed how the markup for my typical home page has changed. Much like those funny drawings the content of my HEAD tag has dramatically increased, while the content within my BODY tag has shrunk to almost nothing. Of course I build dynamic single page web applications these days with performance as a 1st class feature requirement. As those two requirements have become prominent it has led to my BODY content to be extremely Spartan.

As I was looking at the response for my Blog, the one you are reading, this morning I noticed my BODY markup was 30 lines (including blank lines) of HTML and the HEAD was composed of 74 lines! Wow more than double the size of my BODY. What a big HEAD I have, LOL.

Of course the site is dynamically built, so in the end, depending on the URL's content the BODY's content will expand as needed. But when you request my Blog with a primed request you only get the above markup in the BODY element. For the record the first time you request any URL on my Blog there are many tags returned containing 'core' markup for each view and of course content templates.

Back to the HEAD, it has really grown in size, mostly with META tags directing different browsers. The first META and TITLE tags cover the basic stuff any site should have included for the past 20 years, title, description, etc.

After that it gets all mobile/modern webby. First the ViewPort META tag, which directs the browser how to render the content on mobile devices. Honestly as more and more tablets and other touch screens are purchased the view port is an absolute must for any web site to include. For more information on the ViewPort META tag read this great article from the Internet Explorer team.

Next I talk to mobile Safari, the browser on all iOS devices. There are two important sections here, icons and how the web app should render when pinned to the home screen. As Apple has increased the screen resolution on its iOS devices the icon size associated with apps has also changed. I don't even bother with the oldest version any longer (57x57), but include dedicated images for the higher resolution images.

After the web app's icon directives I tell Safari the application is web app capable, which means it can be run directly from the home screen and not use the Safari chrome. Basically it makes my web application look and behave like a native iOS application, minus some much desired devices APIs. The last iOS META tag tells the operating system what color the status bar at the top of the screen should look like; black, gray or transparent.

Now for Internet Explorer, wow lots of good stuff here. First, instead of using the TITLE tag Windows allows you to provide a application name. At first you probably ask why not use the TITLE? My answer is you should have a URL specific title, but the application should have a dedicated name that is URL independent and of course fit nicely in a live tile.

Next come a series of META tags that drive the Internet Explorer pinned site and live tile experiences. I wont go into detail here about these tags today, but you can read about the pinned sites meta tags, http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx. Just a couple of quick notes. Make sure the logo paths are part of the domain, they cannot be hosted on a sub-domain, I found out the hard way. Also I have not gotten around to activating the live tile updates for this Blog yet.

Next I noticed the http-equiv META tag and said, whaaaaat???? I got nothing on this one so far. I know I pulled it from the HTML5 Mobile Boilerplate project . My guess is it forces clear type fonts and I think is something legacy from the IE6/7 days and possibly an issue on some older smart phones.

Finally I add a reference to my stylesheet and the Google analytics script. Normally I would say no SCRIPTs in the HEAD at all, but Google analytics is well behaved and loads asynchronously, which means it won't actually load the script till after the page is rendered.

That's it, a quick review of a typical modern web application's HEAD content. It is a much larger set of directives than was common just a few years ago, but really drives some much better user experiences with live tiles and home screen web applications. Is your HEAD bigger than your BODY? Maybe it should be.

My HEAD is Bigger Than My BODY