Last time out we looked at the Anatomy of a Web Page. Using that, let’s move on and look at the first of the two major sections, the head.
For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me 🙂
Using the head from my (recently updated) starter assets project as an example, let’s look at the code in detail. First, what it looks like in total:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if gte IE 7]>
<![if IE 7]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie ie7" lang="en" >
<![endif]>
<![if gt IE 7]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie ie8" lang="en" >
<![endif]>
<![endif]-->
<!--[if !IE]> <-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<!--> <![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change This Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=8;chrome=1" >
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<link rel="shortcut icon" href="" />
<link rel="stylesheet" href="_assets/styles/styles.css" />
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" href="_assets/styles/ie6.css" />
<![endif]>
<![endif]-->
</head>
If that doesn’t make sense to you, don’t worry, it will after I go through it. Well, the bits that need to make sense will.
Let’s start at the top and work our way down.
Doctype Declaration (DTD)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I could explain what this nonsensical string means, but I won’t.
All you need to know is that it tells the browser what type of HTML document we’re serving.
Yes, there are different types of HTML. Why that matters isn’t important right now as all the flavors use basically the same patterns, so we can look at structure without worrying about flavor-specific differences too much.
Don’t worry about learning the above, by the way. There’s plenty of HTML to learn, the DTD isn’t one of them. If, for some reason, you ever need to make an HTML document from scratch, search for “xhtml doctype” (or “html 4 doctype”) and copy and paste the result.
This example uses the xHTML 1.0 Strict Doctype. Other flavors are:
HTML 4.01 Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5 Doctype
<!DOCTYPE html>
My favorite is clearly the HTML5. Beyond my excitement over the specification itself, I like the fact that it’s easy for me to remember.
Why you would want to use one Doctype over another over is something I’ll cover at a later date.
For now we’re just going to continue the tour of the head confident in the fact that we’ve signaled to the browser our intention to use xHTML 1.0.
Fancy.
The HTML Element
Before I get into my specific example, which has some complicated stuff attached to it in order to make our lives easier later on, I’ll show you what a regular, xHTML opening html tag looks like:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
Now let’s look at my fancy version:
<!--[if gte IE 7]>
<![if IE 7]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie ie7" lang="en" >
<![endif]>
<![if gt IE 7]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie ie8" lang="en" >
<![endif]>
<![endif]-->
<!--[if !IE]> <-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<!--> <![endif]-->
What’s going on there? Without getting too far into the details of conditional comments, the above defines three separate opening html tags.
- One for Internet Explorer 7. Two classes are added to the
htmlelement- “ie” and “ie7” - One for Internet Explorer 8. Two classes are added to the
htmlelement- “ie” and “ie8” - One for every other browser. No classes are added to the
htmlelement
Why do that? Well, with the classes on the html element it’s easy to target CSS fixes for both of the Internet Explorer versions in your style sheet (we’ll deal with IE6 later.)
More on this kind of stuff later, when we talk about CSS.
Just remember that we we made something easy without sacrificing much at all.
Easy is good.
One other thing to note is the lang="en" attribute. That sets the language of the document to English. If you’re authoring documents in languages other than english familiarizing yourself with the various language codes is time well spent.
The head
This is the actual head, as opposed to the other stuff which is warm-up for the head itself.
As I mentioned before, the head generally contains information computers read about a document. You’ll see what that means more clearly as I work my way through the next few elements. Let’s look at each of them in turn.
HTTP-EQUIV
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
In our xHTML example we’re indicating the type of content (text/html) and the character set the document is encoded in (utf-8) using the http-equiv attribute of the meta tag. These are equivalent to HTTP headers. If that doesn’t mean anything to you, don’t sweat it, there’s only one bit you need to really pay attention to in this string- the charset (short for character set). Character sets are important. Far too important to go into here where I’m trying to be really broad and not so deep.
I’ll sum it up thusly, UTF-8 is a pretty good choice for international content (and at the end of the day what content on the web isn’t international content.)
Except when it’s not. The good thing is, you’ll know when it’s not as your text will look all funny.
If you’re serious about making web sites, read this article for more about character encoding than you probably ever wanted to know… It’s an important topic so folks should really take some time to familiarize themselves with the issues at play.
The Title
<title>Change This Title</title>
The title is just that- the title of the page. You can see it in the title bar of your browser.
The title is one place where there are primal Search Engine Optimization (SEO) issues.
For starters search engines only show 60-70 characters, so keep your titles within that range. Additionally, they should be unique across your site, should contain the site name, and should reference pertinent keywords to the document content.
Check out SEOMoz’s SEOmoz’s Best Practices for Title Tags for an in-depth look at how to handle title tags.
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=8;chrome=1" >
This is an IE-specific tag that says “Please render this page in IE8 mode. If that’s not available, I’ll use Google Chrome Frame.”
Which does two things in the two browsers that understand it. In IE6 with Google Chrome Frame, it turns on the power of Chrome in IE6, turning all of our frowns upside down. In IE8 it forces the browser into IE8 Standards mode. AKA, the best Microsoft has to offer. If you’re doing standards based development that’s the IE8 mode you want.
Robots
<meta name="robots" content="index, follow" />
This meta tag simply tells Search Engine spiders to index (save the file in their database) and follow links present on the page (to find more pages for their database.) If you’re doing development on a net accessible server it’s good to turn this off (with noindex, nofollow), just in case the pages are somehow discovered. Just don’t forget to flip the switch when you go live 🙂
Meta Description
<meta name="description" content="" />
Think of this as an ad for the page you’re making. In a lot of ways it is, as Google will often (but not always) use the meta description as the text on search engine results pages (affectionately known as SERPs.) Keep it to less than 155 characters.
Shortcut Icon/favicon
<link rel="shortcut icon" href="icon.png" />
Ever wonder about the little icon next to the URL in the address bar? This is a link to that file. I use a nifty PNG.
The Style Sheet
<link rel="stylesheet" href="_assets/styles/styles.css" />
And now we attach a style sheet. Fun times. More about CSS later 🙂
And Now, Internet Explorer 6
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" href="_assets/styles/ie6.css" />
<![endif]>
<![endif]-->
</head>
This little bit of code attaches a separate style sheet for Internet Explorer 6 (and 5.5, but that’s a rare, rare browser now.) I do this because the rules for IE6 can occasionally become, well, insane and I want to keep IE6 style insanity out of my regular style sheet.
And there you have it, a quick jaunt through the head of the document. Next up, a quick interlude dealing with file structures and then it’s onto the body and some HTML markup that users will actually see.
Found your site after watching the HTML5 video on wordpress.tv and having a look around. Just wanted to point out that in the code, you specified a .pgn., not a .png file for your favicon. Might confuse some people.
Thanks!
I’ll fix that now.
Hi, I like the idea of giving ie browsers a different html tag with a specific css class for ie and the version.
One thing I’m missing in your head though is the following line which forces ie8 to run in ie8 standards mode.
Cheers
tj
@Thomas Thanks for the feedback, that’s a really good one.
If you view source on the site you’ll see I actually use the following here.
<meta http-equiv=”X-UA-Compatible” content=”IE=8;chrome=1″ >
I’ll add it to the tutorial.