Use these to jump around or read it all...
[Basic HTML Format]
[What the HEAD Commands Actually Do]
[Information Regarding the Document]
[TITLE Commands]
[META Commands]
[Base HREF Command]
[Parts 2 & 3]
Try this for fun. Without telling the people what you are doing, ask a few of your friends what the <HEAD> commands on an HTML document are for. I'll bet you get widely differing answers. I received a letter from a person who really chewed me out for not involving the HEAD commands in the HTML Goodies Primers. I asked why this struck such a chord with her and she answered that the
commands have to be in the document for it work correctly. "No, they don't," I replied. "Yes, they do," she replied back. "No they don't," I wrote back. "Do too," she replied. "Do not!" "Do too!" "Do not!" "Do too!" "Do not!" "Do too!"
The conversation went downhill from there.
Actually we're both right. Here's a very basic HTML document format. You've seen this example 100 times, I'm sure.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Displays in browser window
</BODY>
</HTML>
When I was first learning to use HTML, I saw that same example over and over again. I thought the HEAD commands made things pop up in the blue bar at the top. You see, that was all I ever saw inside of them. So, because I was left to my wits to learn this language, I figured I didn't need those commands. I wrote without them for a good long time. None of the pages ever seemed incorrect or flawed so I just never felt I needed them.
It wasn't until the advent of JavaScript and META commands that I
even cared what they did. This is all true. When I teach HTML in a classroom, I do not incorporate the HEAD commands until after the students learn to manipulate text with bold, italic, and other types of commands.
I'm sure that statement is right now driving someone out of his or her skull. Again, I say... what would you tell students who are just being introduced to the language what those commands do? Header commands are a
great part of HTML. I know that now. But I still think they are to be taught separately, as something to incorporate rather than something that's required.
I don't know why I told you that... I guess I just love sharing with you people. So, let's get started.
What The <HEAD> Commands Actually Do
The HEAD commands do three things:
- They contain information regarding the document.
This data does not appear in the browser window when the page is loaded. The data is mainly used for helping search engines with page descriptions, browsers with base domains, and other data not generally regarded as display content.
- They separate the page into two distinct sections.
Ever go into a page that won't load, but somehow the title is up there? It's inside the HEAD commands.
- They are loaded first and what is included between them is run first by the browser.
Here's the first section in a little more depth:
Information Regarding The Document
TITLE Commands
This is the most popular command to appear between the HEAD commands. It places text within the color bar at the very top of the browser.
I must say I liked it before the newer version browsers placed their name after the TITLE text. That did not used to be the case. It was just text you wrote. Plus if you wrote a lot of TITLE commands, they would all be
compiled one after the other. You could have animation in the blue bar at the top. It was great. The newer browsers don't go for more than one TITLE command these days.
Geez, I'm starting to sound like Dana Carvey's Grumpy Old Man.
We had lots of TITLE commands. And that's the way I likes it! ...Sorry.
At this point in time, we'll begin constructing the fully functioning HEAD command extraordinaire.
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
</HEAD>
META Commands
I have a full tutorial just on
META Commands and what they do. Here, I'll quickly outline some of the more popular ones.
- <META NAME="keywords" CONTENT="key,word,key,word">
This offers key words to the search engines that use them in their searches.
- <META NAME="description" CONTENT="Great page! Come see!">
This offers a description of the page for search engines that use them.
- <META NAME="generator" CONTENT="Notepad">
This tells search engines what program was used to create the document.
- <META NAME="author" CONTENT="Some Body">
This tells search engines who wrote the document.
- <META NAME="copyright" CONTENT="Copyright © 1997 Me">
This tells search engines... blah, blah, blah.
- <META NAME="expires" CONTENT="15 September 2000">
This automatically expires the document in the search engine's database.
Adding these commands, our Super Duper Head command section grows to this:
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
<META NAME="keywords" CONTENT="key,word,key,word">
<META NAME="description" CONTENT="Great page! Come see!">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="Some Body">
<META NAME="copyright" CONTENT="Copyright © 1997 Me">
<META NAME="expires" CONTENT="15 September 2000">
</HEAD>
The Base HREF Command
The Base HREF instructs the browser to use a path as a basis for all links and images on its page. Here's the basic format:
<BASE HREF="HTTP://www.htmlgoodies.com/">
The command acts as a reference for the remainder of the page. When you use the Base HREF, whatever you place between its quotes will be added in front of any links you write. For example:
I write the link:
<A HREF="page.html">
Since my document employs the Base HREF command, the link now becomes http://www.htmlgoodies.com/page.html.
I have yet to adopt the Base HREF command because of the setup of my pages. I include page jumps a lot. If I use a Base HREF, then the page jump only works on the server. If the document is on my hard drive, then it won't jump because the Base HREF command won't stop adding the domain to the links and images. However, when the page is posted to the Net, it tends to reload the page with the entire domain attached rather than just jumping to the page section I want. I don't use it, but I can see why one would use it. If your page happens to be reposted off of your server, then all of the images would point back at the original source of the images.
Let's continue making our Super Duper HEAD command section:
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
<META NAME="keywords" CONTENT="key,word,key,word">
<META NAME="description" CONTENT="Great page! Come see!">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="Some Body">
<META NAME="copyright" CONTENT="Copyright © 1997 Me">
<META NAME="expires" CONTENT="15 September 2000">
<BASE HREF="HTTP://www.htmlgoodies.com/>
</HEAD>
Parts Two and Three
Above I said that the Head commands break the page into two distinct sections and also are loaded and run first. Where that comes into play is where you have a script of some sort. Let's take JavaScript, for example.
If you place your JavaScripts in the HEAD commands then they will be run first before the remainder of the page loads. Usually this is the case when the JavaScript has two parts, a script, and then something that calls for that script to place an object on the page. The Image Flip tutorial is a good example of this.
The purpose of separating the script from the element that calls for it is to speed the use. The script is already running by the time the call is made for its services.
As for separating the document into two parts, it is often possible that two entities won't run together. Again, two JavaScripts, for example. Placing one inside the HEAD commands and the other inside the BODY commands
tends to separate them enough to calm the fight. Often, they then both run.
Adding a JavaScript to our Super Duper HEAD command section, we get this:
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
<META NAME="keywords" CONTENT="key,word,key,word">
<META NAME="description" CONTENT="Great page! Come see!">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="Some Body">
<META NAME="copyright" CONTENT="Copyright © 1997 Me">
<META NAME="expires" CONTENT="15 September 2000">
<BASE HREF="HTTP://www.htmlgoodies.com/>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
Ah, but it goes on. It is now possible to use these things called Cascading Style Sheets to help pretty up your pages for all. They go in the Head commands, too.
Add them in the recipe and you get the finished product:
<HEAD>
<TITLE>Big Fat Head Commands</TITLE>
<META NAME="keywords" CONTENT="key,word,key,word">
<META NAME="description" CONTENT="Great page! Come see!">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="Some Body">
<META NAME="copyright" CONTENT="Copyright © 1997 Me">
<META NAME="expires" CONTENT="15 September 2000">
<BASE HREF="HTTP://www.htmlgoodies.com/>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<STYLE>
</STYLE>
</HEAD>
Well, there it is. The ultimate HEAD section of an HTML document. Of course, all of that is not needed, but it can't hurt to add it. You'll be helping search engines and some users of your site. I've altered the program I sometimes use to include the six meta commands above already. I'm not so sure about the Base HREF command yet though....
Enjoy!
[Basic HTML Format]
[What the HEAD Commands Actually Do]
[Information Regarding the Document]
[TITLE Commands]
[META Commands]
[Base HREF Command]
[Parts 2 & 3]
IE 7
Firefox 2.0
