HTML <head> Tag
Example
A simple HTML document, with the minimum of required tags:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My first HTML page</title> </head> <body> <p>The content of the body element is displayed in the browser.</p> <p>The content of the title element is displayed in the browser's title.</p> </body> </html>
Definition and Usage
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.
The <title> tag defines the title of the document, and is the only required element in the head section!
Browser Support
The
<head> tag is supported in all major browsersDifferences Between HTML and XHTML
NONEOptional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description | DTD |
|---|---|---|---|
| profile | URL | Specifies a URL to a document that contains a set of rules. The rules can be read by browsers to clearly understand the information in the <meta> tag's content attribute | STF |
Standard Attributes
The<head> tag supports the following standard attributes:| Attribute | Value | Description | DTD |
|---|---|---|---|
| dir | rtl ltr | Specifies the text direction for the content in an element | STF |
| lang | language_code | Specifies a language code for the content in an element | STF |
| xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
More information about Standard Attributes.
Event Attributes
The<head> tag does not support any event attributes.More information about Event Attributes.
Example 1
Specify a default URL and a default target for all links on a page:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://xhtml.co.il/images/" /> <base target="_blank" /> </head>
Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://xhtml.co.il/images/nord1.gif"
Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
Example 2
This example demonstrates how to format an HTML document with style information added to the 'head' section.<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>Example 3
How to use the <link> tag to link to an external style sheet.<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://xhtml.co.il/tryit/html/styles.css" > </head> <body> <h1>I am formatted with a linked style sheet</h1> <p>Me too!</p> </body> </html>
Example 4
How to use <meta> tags to describe the document.<html> <head> <meta name="description" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Adam Pery" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html>
Was this information helpful?
