The HTML <head> Element

The HTML <head> Element is defines just after the <!DOCTYPE html> declaration. The contents laid down in between the head tags aren’t visible over the web pages except <title> tags. Content specified in between the title tags is displayed on the top of the web browser with favicon like below example:

Example - 1

HTML5 Head tag - Favicon and Title
HTML5 Head tag - Favicon and Title


Metadata is the most important data which is defined on the html document. Metadata is defined inside the <head> tags.
Metadata is the set of the information that can be machine parsable but not visible on the web pages. It defines the data of the html document. Metadata can be defined in the <meta> tags. Meta elements are the typically used to specify Page Description, Keywords, Author of the Document, last modified and the metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Example - 2

  <meta charset="UTF-8">
  <meta name="description" content="Tips and Tutorials of Programming Languages">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="Progrramers">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Tips: Name, content and charset defined above in the <meta> tags which is called attributes of meta tag

What is the viewport?

HTML5 introduced a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag. The viewport is the user’s visible area of the web page. It varies with the devices screen size. A <meta> tag named viewport gives the instruction on how to control the page dimension and scaling with respect to the screen size. Read given example carefully

Example - 3

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In above example metadata name is “viewport”. The width=device-width part sets the width of the page to follow the screen-width of the device which will vary depending on the devices like Large Screen of Desktop/Laptop or Small Screen of Tabs/Smartphone. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

We will read more about this Meta type in the Responsive Web Page.

Below are the Metadata type and their definition which will help you to understand the metadata.

Example - 4

1. The Keywords defines the keywords for the search engines.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

2. The description describe the content of the web page.
<meta name="description" content="Tips and Tutorials of Programming Languages">

3. The author define the author of website.
<meta name="author" content="Progrramers">

4. This will refresh the document in every 30 seconds.
<meta http-equiv="refresh" content="30">

5. Sets the user’s visible area of the web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Related Topics



Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment: