Head element
The HTML head element is placed at the top of the document and is used to describe properties of the document such as the title, keywords and description.
A typical head element may look something like this:
<head>
<meta charset=”utf-8″ />
<title>My first web page</title>
<meta name=”description” content=”Here’s a description of this page” />
<meta name=”keywords” content=”my, first, webpage” />
<link type=”text/css” rel=”stylesheet” href=”css/default.css” media=”all” />
</head>
Title Element
The title element is one of the most important elements within the head of an html document as it is what appears at the top of the web browser, in any browser tabs and is also used for ranking purposes within the major search engines.
Meta Element
Within the above code, the meta element is used a number of times to provide more information about the document. The following sections explain what the meta element is used for.
Charset Attribute
<meta charset=”utf-8″ />
The charset is used to tell the browser which range of characters are used within a web page. If the character encoding that is declared in the head doesn’t match the one that is actually used, then the text within the web page may show incorrectly with some unusual symbols being displayed in place of what you’re expecting.
If you’re unsure which character set to use then we’d usually recommend using UTF-8 but there’s plenty of detailed reading on the subject at the following link if you want to understand character encoding fully – The Definitive Guide to Web Character Encoding
Meta Description and Meta Keywords
These meta elements are used for search engine purposes and while they won’t actually help with ranking in the major search engines anymore, it’s still worth including them within your web page. We’ve written an extensive guide to search engine optimisation and an article about?On Page SEO – Head Elements?which you can read if this area is of interest to you.
Link Element
The link element is used to associate the HTML document with an external CSS file in the following format:
<link type=”text/css” rel=”stylesheet” href=”css/default.css” media=”all” />
This piece of code will include a file called “default.css” which exists within a folder called “css”. It will also be used on all devices as we’ve specified the media=”all” attribute and value. There are other values for the media attribute, the most common being screen and print but for now it’s best to serve up the same CSS file for all devices and formats.
Summary
There are some other elements that you can include within the head element but you’ll usually only want to include these as and when you need them so the above should get you started in setting up your head element initially.
