Head

How Can We Help?
< All Topics

Head

HTML Head element mainly contains metadata (data about data) about the HTML Page.

You can place the HTML page title, scripts, styles, and other meta information in the head element. This information is helpful for search engines and provides additional data for HTML pages.

Type of data in HTML Head element:

  • Title: HTML Head element contains the title of the page that is displayed in the browser title bar.
  • Scripts: All client-side scripts such as JavaScript often included in this Head section
  • Styles: Internal & External Style rules also included inside the Head element
  • Meta: A few meta tags such as descriptions & keywords about HTML pages are included inside the head section. These are useful for Search Engines.

The above data in the head is never directly visible in the main browser window. Some of the head metadata is helpful for search engines like Google for better document understanding. At the same time, styles are used to extend page formatting. Scripts are internally used to enhance HTML web page functionality & event handling.

Example of HTML Head Element data

<!DOCTYPE html>
<html>

<head>
<title> HTML Head Tutorial - xyz.com </title>
<meta charset="UTF-8">
<meta name="description" content=" This website provides free online tutorials">
<meta name="keywords" content="HTML, CSS, PHP, SEO">
<meta name="author" content="xyz.com">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
alert("Simple JavaScript Alert");
</script>
</head>

<body>
This is sample content.
</body>

</html>

You can see following example, where different kinds of meta-information are included in the Head element.

When you run the above example, you can see some titles in the Browser title bar as defined in the title tag in the head. Search engines use meta keywords, descriptions & author information.

You can read in detail about styles & scripts in later chapters.

Table of Contents