<head> Tags in EE sites
There are many approaches to setting up the head and doctype of a template in ExpressionEngine. Up until EECI 2011 I had been using embeds for the head of my document and passing through any additional javascript or css files as variable. For example from an older site I had this:
<!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">
<head>
{embed="includes/meta" my_title="Photo Gallery" my_css="<link href='/interface/css/calendar.css' rel='stylesheet' type='text/css'>" my_js="<script src='/js/scripts.js'></script>" }
</head>
And in the embed template the following code:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>{embed:my_title} | {site_name}</title>
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="/interface/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="/interface/css/text.css" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="{path="includes/main_CSS"}" />
{embed:my_css}
<!--[if lt IE 8]><style type="text/css" media="screen,projection">@import "{path=includes/ie}";</style><![endif]-->
<!--[if lte IE 6]><style type="text/css" media="screen,projection">@import "{path=includes/ie6}";</style><![endif]-->
<!-- RSS -->
<!--<link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />-->
<!-- Jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
{embed:my_js}
The above works fine, but the embed can get difficult to read if you have a lot of information to pass through it. It's also important to remember that anything inside the variable quotes my_js="" cannot also use double quotes - must use single quotes there. This is a great way to organize your head and pass through additional scripts/css files. However your template will take a hit since using embeds increases the overhead necessary to load your page.
Using Snippets
After attending EECI 2011 I was convinced that embeds should be avoided where possible to help improve site performance. At that point I started looking at using snippets instead of embeds.
Now my typical template will look like this:
{lv-snip-doctype-header-cc}
<title>Home | Caffeine Creations</title>
<meta name='description' content='{lv-gv-description-default-cc}' />
<meta name='keywords' content='{lv-gv-keywords-default-cc}' />
{lv-gv-mint-cc}
</head>
Here we see two snippets, well actually these are early parsed low variables, which are effectively snippets. The first snippet contains everything that will be on all pages as you can see below and the second is the code I need to run Mint Analytics.
<!DOCTYPE html>
<!--[if IE 7]> <html class="ie7 no-js" lang="en"> <![endif]-->
<!--[if lte IE 8]> <html class="ie8 no-js" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Sean Smith">
<link rel="alternate" type="application/rss+xml" title="RSS"
href="/blog/rss">
<link rel="stylesheet" href="/css/style.css" media="screen" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic" />
<link rel="stylesheet" href="/css/fancybox.min.css" media="screen" />
<link rel="stylesheet" href="/css/mediaelementplayer.min.css" media="screen" />
<!-- HTML5 Shiv + detect touch events -->
<script src="/js/modernizr.custom.js"></script>
Following the doctype header snippet there is then the meta description and keywords and title tags so that these can be set on a per page or per template setting. Finally, before the closing head tag, there is room to add page specific css or javascript files which using the previous method would be passed through as a variable.
The method I have chosen to use is by no means the only one available, but it's what I'm using now. Should I find another method that is easier or in someway better than I would be willing to give it a shot. Thoughts and comments are appreciated on this part of building sites with ExpressionEngine.
Your Voice Here