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 <html> opening 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 tag might look more like this?
<html xmlns="http://www.w3.org/1999/xhtml"></html>
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>
<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 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 https://sushicodes.com/wp/wp-content/plugins/wp-codemirror-block/assets/blocks/blocks.style.build.min.css to https://sushicodes.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 Son’s website from one of my personal blogs, I could do something like this:
<a href="https://sausagecam.com/" rel="met co-worker sweetheart">Son</a>
This tells you that I’ve met him, and he’s both my co-worker and my sweetheart (“awww!”). And if he were to link to one of my personal websites from his, he 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 week, and we’ll talk about all the stuff you see between the <head></head> tags.
2 Comments
Pingback: HTML: A Few Basic Rules – SushiCodes
Pingback: Microformats - What are they, and why are they important to my website? - SushiCodes