The head area of a HTML document contains some really important things. There is of course the title of the page, the meta data such as “description”, and the calls to your external CSS or Javascript files.
The order in which you place elements in the head can drastically change how fast your page displays in web browsers.
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>
All of these things either tell a web browser how to display your page or tell search engine spiders a little bit about what your webpage is about.
These are both very important things. You would think then that we would pay close attention to this under appreciated part of our webpage, but it often becomes a jumbled together place in our static pages or a strange mysterious place in our wordpress pages.
Below is a representation of how your head elements should be ordered and why.
The Head element
Let’s start by opening the head…
<head>
Character encoding
The next line should be the character encoding…
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
Why? In order for a web browser to display your webpage it needs to know what it is dealing with. Setting the character first allows a web browser to just move forward and display your page, with out it, it has to “guess” and take other steps. With it, it just can move on and display your page. note: Your character encoding may be different than mine so don’t just copy and paste this one.
Title and Description
Next we can place a title and description meta tags, let’s place the title first and the description next so we have some order to our pages and we can quickly see what our page is about…
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
If you choose to use the keyword meta tag, place that next.
<meta name=”Keywords” content=”your keywords” />
External CSS
The CSS should go next. This very important. Always put your CSS and calls for CSS prior to other external calls for other files like javascript. If you call a javascript file before your CSS the Javascript has to download before anything else can happen (like displaying your webpage).
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
If you put the CSS first, the CSS and other files can be downloaded in parallel (at the same time) whereas if you call for javascript file first, the same files have to be downloaded one at a time. This creates sometimes massive speed changes. Always call your css before your javascript files.
External Javascript
Now that our CSS file is being called we can call for our javascript without messing anything up…
<script src="your js file"></script>
Close the head
Now we can close the head like so…
</head>
A well ordered head section
Let’s put it all together now…
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Your page title</title>
<meta name=”description” content=”your page description.” />
<meta name=”Keywords” content=”your keywords” />
<link href=’your css file’ rel=’stylesheet’ type=’text/css’>
<script src="your js file"></script>
</head>
There are many things that can be placed in the head of an HTML document, but following the above few rules will help speed up your webpages and make your code look better and easier to use.
