HTML 5 head Element Simplified
Mastering HTML5 - Part 1
Forward: In this part of the series we look at the content of the HTML 5 head element.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Prerequisite
You should have completed the series, titled, HTML5 Basics, before starting this series. You can reach the previous series using the link below
Why this Series
The series, HTML5 basics, have features you have to know to attempt the design of a website. This series will add more to that, completing what you should know in HTML in order to design any kind of website. After this series, you have to learn, CSS3 Basics, and ECMAScript 5 Basics, and a few more series in order to become a professional.
Order of Reading this Series
This series is made up of parts (short chapters). Some consecutive parts are related. If you are new to HTML, then read this series in the order given. If you are not new to HTML, then you can read this series in any order; however the consecutive parts should be read in the order given. Whether you are new to HTML or not I advice you to complete this series, as that will be taking you toward a professional in HTML programming.
The head Element
Consider the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Page Title</title>
<head>
<body>
</body>
</html>
The head element and the body element are the two main elements in an HTML document. Each of these two elements can take many other elements.
The head element generally takes metadata. Metadata, means, data about data. Here the data is what is in the body element. So metadata here means data concerning what is in the body element. The value of the title element and that for the web page icon can be seen at the browser. In general, elements placed in the head element are not seen at the browser. Again, all the elements that go into the head element have data about what is in the body element.
Elements inside the head Element
The title element is a double tag element (<title></title>). The content is what appears in the title bar of the web page (document). An example is:
<title>Title of the Web Page</title>
The link Element
The link element is an element that goes into the head element. Full treatment (studies) of the link element needs a small series. The link element is for external recourses, similar to the hyperlink. Here, I will only explain how to use the link element to have an icon for your web page.
Many institutions have a logo. A logo is a small image that identifies an institution. For a web page (of an institution), such a logo is called an icon. If you want an icon for a web page, type the following tag as one of the contents of the head element:
<link rel="icon" href="imageURL" type="image/x-icon">
The only thing I will explain here is the value of the href attribute. The value of the href attribute is the URL of the image that will appear as the icon for the web page. This icon appears as a small image in the window tab (up) of the web page. The actual image at the server can be 100px by 100px (or less). If you want the icon for all the pages of the web site then place the tag in the head element of every page of the web site.
You can have more than one link element in the head element. Too much use of the link elements can slow down the downloading of your web page. You usually will not need many link elements. So, I will not talk about link elements anymore in this tutorial. However, we may come back to link elements later, after this tutorial.
The meta Element
The meta element is used for general purpose metadata. It has three important attributes, which are name, content, and http-equiv. I will use these attributes to explain how to code some general-purpose metadata.
Author of Web Page
Assume that you have designed and coded a web page. It means you are the author of the web page. Assume that your name is John Smith. You can indicate this in the web page head element, with the following meta element:
<meta name="author" content="John Smith">
Application used in creating the Web Page
I teach you how to design and code web pages by hand. However, there are applications that are like word processors that you can used to create web pages. You use such an application to create a web page as if you are producing a word processor document. Such applications are called generators because they generate HTML code. Assume that you have used one such generator to create your web page and the name of the generator is Webproducer 4.6. You would use the following meta element to indicate this:
<meta name="generator" content=" Webproducer 4.6">
The meta element can be used to type the keywords of the document. Keywords are important words of the user information in the body element. Keyword here means a word or a phrase. Assume that a web page is talking about a computer. The meta tag for the keywords would be something like:
<meta name="keywords" content="microprocessor, memory, tower, LCD screen, Bell">
The keywords are separated by commas. Search engines no longer respect this meta element. However, it is good to have it in your web page especially if your web pages form an ebook. An HTML ebook is an electronic book made up of related HTML pages. If you write an HTML ebook, then you will need this tag for the small search engine, which you will include in the ebook.
Description of Web Page
The user information in the body element of the web page can be described or summarized. You use the meta element for this description as follows:
<meta name="description" content="The description paragraph text goes here.">
The words, author, generator, keywords and description are standard metadata names (values). Note how the attributes, name and content, have been used above.
Interval Reloading of a Page
Assume that you are the website designer of a very big news company (like CNN or BBC). For such a company, news is always occurring and you website front page has to be updated regularly, say every 5 minutes. To achieve this, you place the following meta element in the head element:
<meta http-equiv="refresh" content="300">
The value of the content attribute is in seconds. 5 minutes is 300 seconds ( = 5 X 60 ). Note the use of the http-equiv attribute in the tag. With this tag, the user will see the page uploaded every 5 minutes. This tag can be used for any web page that is updated periodically. At the server, the web page file has to be replaced regularly.
You are the one to choose the updating interval. If you want client update every 10 minutes, then the value of the content attribute will be, 600 (10 X 60).
Summary
A good website designer will have as a minimum the following in the head element of a web page:
<head>
<title>Title of the Web Page</title>
<link rel="icon" href="imageURL" type="image/x-icon">
<meta name="author" content="John Smith">
<meta name="keywords" content="microprocessor, memory, tower, LCD screen, Bell">
<meta name="description" content="The description paragraph text goes here.">
</head>
Time to take a break. We stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT