HTML: Getting Inside Your Head

Last week, you got the general overview of the head section of your website, but we didn’t really discuss what goes on inside, in the brain of your website, if you will. But as complicated as it might sounds, today we find out how easy brain surgery can really be. Er… at least, when we’re looking at websites.

There are all sorts of things that can go inside the head section of a website – from the common (almost everyone sets a title and a stylesheet) to the obscure (it’s very rare that you’re going to see an <object> tag in any website). So we’re going to talk about the common ones – tags such as title and meta and link that you see in the head of almost every website. (And if you come across a more obscure one that I haven’t discussed, and want to talk about it? You’re always, always free to ask questions and start discussion in the comments section, even if it’s not entirely on topic.)

<title>

The title element is the most straightforward of the elements inside the head section of your website. All it does is define what the title that you see at the very top of your browser says when you visit that webpage. For example, when you’re on the home page of SushiCodes, the title says “SushiCodes”. On this page, the title is “HTML: Getting Inside Your Head – SushiCodes”.

If we weren’t using any PHP, the title element for the home page would look like this:

<title>SushiCodes</title>

However, remember three weeks ago, when I explained how PHP helps your websites become more dynamic? Using PHP, you can have a different title on every page, just like we do. The code looks like this:

<title><?php wp_title('&raquo;','true','right'); ?><?php bloginfo('name'); ?></title>

The opening and closing title tags should be familiar – they’re exactly the same as in the non-PHP version.

Next, you’ll see <?php just after the opening title tag, and ?> just before the closing title tag. This tells your browser that this is your PHP section – every time you write PHP in your code, it must be surrounded by those tags. Inside is the actual PHP code – two functions that tell your browser what to say depending on the page you’re on.

wp_title() is a PHP function that displays the title of the specific page you are on. The first parameter – &laquo – tells the PHP function that you want to use the « symbol as the separator; the third parameter, right, says that you want the separator to be on the right side. This makes it very easy to change the separator… for example, if you wanted to use a -, or a | as the separator instead, you would just switch it out with &laquo.

bloginfo() is a PHP function that displays information about your WordPress blog. We’ve passed in the parameter ‘name’ – this tells the function that we want to display the name of your blog.

Still a little confused about all this HTML and PHP stuff? Don’t worry. For the next few weeks, we’re going to take a short break from going through the make-up of your website, and I’ll give basic introductions to HTML and PHP so you can be more confident looking through the code in your website.

<meta>

The meta element gives meta information about your website. In the default WordPress theme, your meta elements look like this:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>" charset="<?php bloginfo('charset'); ?>">

As you can see, it uses the bloginfo() function again, this time passing in different parameters to provide different information about your blog.

In this form of the meta element, the first attribute (http-equiv) specifies an HTTP header called “Content-Type”, and the second attribute (content) defines a value for the HTTP header that consists of the html type of the website and the charset. This is how the meta element is most often used – to tell the browser what kind of document you are giving it, so it knows how to render your website.

There is a simpler form of the meta element, which defines a ‘name’ attribute and a ‘content’ attribute – such as

<meta name="keywords" content="SushiCodes, coding, Allison Day">

Again, you see the ‘content’ attribute – this attribute is required in the meta element. Every other attribute is optional. In addition to keywords, the meta element is often used to define a description, language, and other meta information about your website that isn’t defined elsewhere in the head section of your website.

<script>

The script element is used to define some sort of script to be used in your website, most often JavaScript. There are two ways you can use the script element to include JavaScript in your website.

The first way is inline. You can include the actual JavaScript code in the HTML code, like this:

<script>
    (JavaScript code)
</script>

The second way is as a separate JavaScript file, which looks a little more like this:

<script src="javascript_file.js" type="text/javascript" charset="utf-8"></script>

What’s the difference between the two? Well, technically, there isn’t one. They’re interchangeable. It doesn’t matter if you put your JavaScript inline in your code or include it in a separate file – it will work the same.

But when you’re including the JavaScript code in the body section of your website, the code is executed as it loads. So it makes a difference where the JavaScript is included, because it changes when the code is loaded and if it will work right… but that’s another topic better saved for a future post.

<link>

The link element is most often used to define a CSS file for your website… something like this:

<link rel="stylesheet" type="text/css" href="css_file.css" />

But hold on just a second there. Haven’t we seen that ‘rel’ attribute before? You’re darned right we have. Last week, we discussed the XFN profile, and how it defines certain relationships between your website and outgoing links. While the XFN profile defines most human relationships, there are many… er… non-human relationships that matter as well, which are already automatically defined without any need for a profile.

So, as I’m sure you’ve figured out by now, rel="stylesheet" tells your browser that the file linked to in that <link /> element is a stylesheet, and should be rendered as such. Without that ‘rel’ attribute, the browser wouldn’t have the faintest idea what to do with your stylesheet file. There’s also that type="text/css" attribute – that merely tells the browser that the file you’re giving it is a text/css file. That means the file you’re giving it is in regular text… and should be read as CSS. See? Easy!

There are several other forms of the link element that regularly show up in website heads. For example, if you want a favicon for your website (that tiny little icon that shows up next to your website name in the address bar and tabs in your browser), you can set it using a link element: This time the ‘rel’ attribute tells you that the relationship is a shortcut icon, and that the type of file is an image that’s in an .ico format.

Then you’ve got even more link elements with all sorts of ‘rel’ attributes… ‘alternate’, ‘index’, ‘next’, ‘prev’, ‘start’, ‘wlwmanifest’, ‘EditURI’, ‘canonical’, ‘pingback’… but you don’t need to worry about most of these, even though most of them will end up in the head of your website.

Why? PHP to the rescue again!

<!--?php wp_head(); ?--> takes care of most of that, without you having to do a single thing. So just make sure you include that one line of code in the head section of your website, (assuming you’re working with a WordPress theme, of course), and you’ll be good to go.

Still Have Your Head On Straight?

This brings us to the end of the head section of your website. Yes, there are other things that could go in the head, but these four are the most common – you’re a lot less likely to run into most of the other optional elements in the head section. (But like I said before: if you do run into one and want to talk about it, just ask! I’m always glad to discuss any questions you have in the comment section.)

Next week, and the week after–and maybe a week or two after that depending on how long-winded I get, we discuss basics: HTML and PHP. Instead of going through your code step by step, we’re taking a short break to explain how the code itself works, so by the time we get back to the body section of your website, you’ll be able to look at the code and know exactly what’s going on.

Won’t that feel great? Stay tuned… we’ve got so much more to talk about!