HTML: Keep a Good Head On Your Shoulders
Written by Allison Day - December 24, 2009 4 Comments
Before we can get to the body of your website – the stuff you actually see – we need to look at the head.
“But why,” you ask, “do we give a darn about the head if we don’t actually see any of it?”
Well. As with any animal, the head is what makes everything work together. Without the head, sure, your webpage would display. However there would be no JavaScript functionality, there would be no CSS styling. Without the head you would have nothing more than an uglier than heck, barebones website. And honestly, who wants that?
(Okay, so technically you could put both JavaScript and CSS in the body. However it’s incredibly inefficient, and for reasons I’ll explain further in future posts, it’s almost always better to have separate .css and .js files.)
I was going to tell you everything there was to know about the head of a website today. However, the post got too long, so I decided to split it. This week, we talk about the head as a whole, and next week we’ll talk about all the little things that make up the head section of a website.
First Things First
In every website, you have a ‘head’ section and a ‘body’ section. But what holds it all together? (No, not a ‘neck’ section, you smart aleck.)
After the doctype declaration, (which, despite being surrounded by “<” and “>” tags, is not an HTML tag), the next thing you’ll see is the opening <html> tag. (If you’re following along in any WordPress theme, you’ll want to be looking in the ‘header.php’ file.) This is the root element that surrounds all the HTML in your website, and tells the browser where the HTML document begins and ends.
So we see the opening tag, but where’s the closing tag? In a WordPress theme, this time you want to look at ‘footer.php’. At the very, very end of the file, you’ll see this: </html> You know that’s your closing tag because of the backslash in the tag. (If the backslash wasn’t there, then it would be another opening tag. With some tags it’s okay to nest them like that, but there should only ever be one set of <html></html> tags in your webpage.)
So if there’s no backslash, it’s an opening tag, which comes first. If there is a backslash, it’s the closing tag, which comes second. You need to open before you can close. Got it?
Sometimes you’ll see that there’s other stuff in opening tags, taking the form of [attribute name]=”[attribute value]“. Don’t panic. This is completely normal. Remember last week, when I mentioned that sometimes the <html> tag might look more like this? <html xmlns="http://www.w3.org/1999/xhtml">
This is exactly what I was talking about. ‘xmlns’ is the attribute name, and ‘http://www.w3.org/1999/xhtml’ is the attribute value. (If you’re scratching your head wondering why that attribute is there, take a moment to re-read last week’s post. It’s okay. I’ll wait.)
Heads Up
If we were to super-simplify your webpage, it would look something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
(A whole bunch of stuff that's in the head section.)
</head>
<body>
(A whole bunch of stuff that's in the body section.)
</body>
</html>
So, as I explained, you’ll see the doctype declaration first, and everything else is surrounded by the <html></html> tags. Then you see two sections: the head section and the body. Today we’re going to ignore the body and only look at the head.
In the opening head tag there might be a ‘profile’ attribute. The value is a URL that specifies the location of a meta data profile… a profile that defines some of the properties that can be used by the <meta> and <link> tags. It’s certainly not necessary to have a profile attribute on the <head> tag, nor is it required that you use any of the properties defined in the profile.
But how, exactly, do we use the profile? If you go look at the XFN profile of the default WordPress theme (and because few people know what it does, everyone just leaves it in, so it’s in nearly every WordPress theme out there), you’ll find something very interesting indeed.
This profile defines values that can be used for the ‘rel’ attribute… an attribute that might sound very familiar to any of you who have ever seen ‘rel=”nofollow”‘ in any links, or ‘rel=”stylesheet”‘ in the section of the head that assigns a stylesheet to your webpage. ‘rel’ means relationship, and it’s essentially defining the relationship of any URL to your own webpage.
This makes complete sense when you want to say that the relationship of http://siriusgraphix.com/wp-content/themes/siriussteel/style.css to http://siriusgraphix.com/ is “stylesheet”. But did you know that with the addition of the XFN (XHTML Friends Network) profile, you can also define human relationships as well?
For example, if I wanted to link to Wendi’s website from one of my personal food blogs, I could do something like this: <a href="http://lifeslittleinspirations.com/" rel="friend co-worker">Wendi Kelly</a> This tells you that she’s both my co-worker and my friend. And if she were to link to one of my personal websites from hers, she could do the exact same thing.
The point of the XFN profile? The developers had grand aspirations of mapping out the relationships of the entire internet. However, since no one I’ve spoken to has ever heard of XFN even though it’s been around for several years… I’m guessing it’s not getting very far. Nevertheless, it’s something interesting to talk about, since that profile is included in almost every WordPress website out there, even if almost nobody actually uses it.
To Be Continued…
That, my friends, is the head of your website. The general overview, anyways. But if you look in between the head tags of your website, you’ll see that there’s still a lot we haven’t covered. All sorts of tags: <title>, <meta>, <link>, <script>… come back next Thursday, and we’ll talk about all the stuff you see between the <head></head> tags.
Read the Comments
4 Outstanding Responses to "HTML: Keep a Good Head On Your Shoulders"
Dave Doolin on December 24, 2009 at 8:33 am | Permalink
This is really good. I just updated my “head vs. header” article with a link to this one.
BTW, I wasn’t able to copy/paste your article headline. I had to type it out by hand. It stopped me, and I had to reevaluate whether I wanted to take the time to create the link. Not sure why it happened.
Dave Doolin’s last blog post… Is Your Blog Dead As A Doornail? Let’s Talk…
Allison Day on December 24, 2009 at 9:05 am | Permalink
Thanks, Dave!
Hm. That certainly wasn’t on purpose, but I believe the reason for that is the plugin (WP-Cufón) that we use to enable extra fonts. I’ll definitely try to see if there’s a way to make the headline (and anything else that uses WP-Cufón to display the fonts) copy/paste-able… thanks for bringing that up.
2 Trackbacks
[...] This post was mentioned on Twitter by Allison Day and Allison Day, Deb Dorchak. Deb Dorchak said: Have you got a good head on your shoulders? http://bit.ly/6iemsL [...]
[...] [Update 12/24/2009: Here's an excellent article on the head element from Sirius Graphix: "html: keep a good head on your shoulders."] [...]