Tutorials
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Head

The HTML <head> Element

 

The <head> element is known as a container for metadata (data about data) which is placed between the <html> tag and the <body> tag.

HTML metadata is known as the data about the HTML document. Metadata is not getting displayed.

Metadata typically is used to define the document title, character set, styles, links, scripts, and other meta information.

The following tags are used to describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <title> Element

 

The <title> element is used to define the document title, and is needed in all of the HTML/XHTML documents.

The <title> element:

A simple HTML document:

Example

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
Try it Yourself

The HTML <style> Element

 

The <style> element defines style information of a single HTML page:

Example

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Try it Yourself

The HTML <link> Element

 

The <link> element is utilised for linking external style sheets:

Example

<link rel="stylesheet" href="mystyle.css">
Try it Yourself

Tip: To learn more about CSS, you can study our CSS Tutorial.

The HTML <meta> Element

 

The <meta> element is utilised for specifing which character set is used, page description, keywords, author, and other metadata.

Metadata is utilised by browsers (for displaying content), by search engines (keywords), and other web services.

Defining the character set being used:

<meta charset="UTF-8">

Defining a description for your web page:

<meta name="description" content="Free Web tutorials">

Defining keywords for using in search engines:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Defining the author of a particular page:

<meta name="author" content="Hege Refsnes">

Inorder to refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example of <meta> tags:

Example

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
Try it Yourself

The HTML <script> Element

 

The <script> element is utilised for defining client-side JavaScripts.

This JavaScript is used to write "Hello JavaScript!" for an HTML element with id="demo":

Example

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Try it Yourself

Tip: To learn more about JavaScript, please visit and read our JavaScript Tutorial.

The HTML <base> Element

 

The <base> element is used to specify the base URL and all the required relative URL's base target present in a page:

Example

<base href="http://daks.me/images/" target="_blank">
Try it Yourself

Omitting <html>, <head> and <body>?

 

In accordance to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.

The following code is used to validate as HTML5:

Example

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself

Note: NGO is not recommending omission of the , , and tags. Omission of these tags can lead to crash of DOM/XML software and can possibly produce errors in older browsers.

HTML head Elements

 
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document