HTML Head tag and elements in Detail
Header tags description
The <head> and </head> tags are used in a HTML document to create the head element that describes the general information about the document. This element is not normally seen in your browser window but its information is used by the browser to configure or define different characteristics or properties of your web page.
Tags and elements contained within <head>
Some of the most common elements contained within the head tags are listed below and a more complete list can be found at: w3.org.
The Title tag
Every webpage needs a title and the title tags <title> and </title> make up the element which is used for (you guessed it!) describing the title of the document. This is the description that you would also see in the title bar at the very top left hand of the browser.
For example this webpage has the title "Building websites for beginners | HTML body and head tags tutorial" and is written:
| <title>Building websites for beginners | HTML body and head tags tutorial </title> |
Example:
Meta tags
The most common Meta tags
The Meta element is used generally to specify the page description, website keywords, document author, and other data.
The meta element only uses an opening tag and is self closing example:
| <meta “attribute” /> |
The Meta element has four attributes:
- content
- http-equiv
- name
- scheme
All of which can have different combinations and uses, more information on this element can be found here More Meta descriptions.
For now we will show you the most commonly used and simple to explain of these attributes to enable you to get started and avoid confusion at this time:
meta http-equiv
The http-equiv element is used to describe the documents content type and the language or character set used.
Example of the content type and character set used in the webpage.
| <meta http-equiv= "Content-Type" content="text/html;charset=utf-8" /> |
Look confusing? Don’t worry this tag is almost always the same for all WebPages, unless you want to display multilingual websites.
meta name
The name element can be used (among other things) to describe the author, content and keywords of a document which helps some search engines to guide your webpage to relevant searches from interested viewers surfing on the internet.
Example:
| <meta name="author" content="Robert Ward" /> <meta name="description" content="Tutorial on tags and elements" /> <meta name="keywords" content="tutorial, head, tags, elements" /> |
Keywords are the description given to search phrases used by people searching the web and are the terms you would type into a search engine such as Google or Yahoo.
The Link tags
<link >
The link element's use is to connect another document or file with the page its inserted in, a classic example is to link a CSS file to the current page for styling the webpage (more of this in the CSS tutorials).
| <link rel="stylesheet" href="styles.css" type="text/css" /> |
Note the link is also self closing <link (attribute/s) />
An example of the above <head> Elements
|
<html xmlns="http://www.w3.org/1999/xhtml">Document type and description
................... BODY Area
</body> end of body |
View this sample script
Download this example to use for testing - Zip format