The HEAD section contains all link relationships, CSS, javascript, meta tags, your page title and lots of other incredibly useless stuff... that is, if your goal is to have a site that doesn't get picked up by searched engines, has jack squat for styling and doesn't need a page title. Let's face it, having a webpage without a solid HEAD section is like owning a dog with no legs. Neither are going anywhere fast... really anywhere at all for that matter.
To better understand some of the elements in a typical HEAD section, let's take a look at a one from another standards-compliant website:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="A 263-unit residential..." />
<meta name="keywords" content="creekstone..." />
<title>Home : Creekstone : Franklin, Tenn.</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css" media="screen">
@import url(includes/style.css);
</style>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="includes/AC_RunActiveContent.js" language="javascript">
</script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="includes/pngfix.js"></script>
<![endif]-->
</head>
Obviously, you have your opening HEAD tag. What follows, the META tags, each have differening purposes. HTTP-EQUIV tags are more or less a simple HTTP header that tells your browser how to handle specific data requests. Stick with the one you see above and you'll be good for 98% of the sites made. DESCRIPTION and KEYWORDS are exactly that. The first should be a short, but quality, description of what the site is about. The second, a list of keywords that you would want someone to type in a search engine to find your site. While 5 years ago, these were all the SEO hype, they're not as important these days. However, one never knows if/when search engines will startusing these again... better safe than sorry.
After your META tags, you'll see a TITLE tag. This is the title for the webpage. You'll see this in the titlebar of your browser and search engines will display this whenever the site is listed in the search results. The title is a tag that must be carefully created as a cleverly created title can boost the sites findability or SEO. On the other hand, you don't want a title that is 250 characters long. Make it clear, make it intentional. Following that, give a nice little LINK REL referring to the site's favicon (if there is one).
Here's where we get into the really fun stuff... our CSS and javascript. Long gone are the days of those pesky styling tags in the HTML and, for the most part, the HEAD. The easiest (and standards-compliant!) way to add styling in to put all your css in one separate file and link to it. There's are quite a few ways to link to the CSS document, only one of which is shown in the example. Following the CSS (or prior to; it doesn't matter) is the javascript. Sometimes this will be present, sometimes not. In this example, we're using a bit of flash, so a javascript file is linked to that allows me to embed flash correctly.
Before closing the HEAD out, we'll throw in any conditional comments that give scpecial instructions to a specific browser or group of browsers. In this case, I've thrown in a fix for IE6 to render transparent PNGs correctly. Although incredibly helpful, conditional comments can be a bad thing if used carelessly and in abundance. True purists wouldn't use these as they're considered hacks.
It's a bunch of information and quite a bit to think about, I know. Nevertheless, the HEAD section is no place to skimp in terms of intention and revision. When carefully planned and executed, they only have to be a handfull on lines long. On the other hand, a HEAD with full CSS and/or javascript embedded in it could literally be thousands of lines long! So next time, be deliberate when coding and don't let everything go to your HEAD (sorry, I couldn't help it). It would really bite to have to edit line 893 on 50+ pages just to change the color of a image border.
Until next time...