Welcome to the “ Html Tutorial” , and today we will discuss Head tag at sharpLesson. In the Last topic, we spoke about html Page Structure and now we will see, head tag and its uses in this topic. Again, we will use practical examples to understand the Head tag.

learn head tag

What is Head tag

The Html head tag acts as a container for all the head elements and shows global information about the document(web page). The Head tag can include:

  • Title – Display the title of a document
  • Script – used to define, a client side script.
  • Style – It will give you style information
  • Base – it is a default target for all links on a page.
  • Link – it will show relationships of a page with external sources.
  • Meta – it will show metadata about the page or document.
  • Noscript – will apply, if scripts are disabled in the browser.


Where to Place Head tag

The Html head tag must be placed inside the Html tag or element, but remember to place it before the body tag. For example:

<html>

<head>        </head>

<body>

Welcome at SharpLesson.

</body>

</html>

Use of title in Head tag

Content without title is not at all useful and it will not catch a eye as well. For example, let us say, if you don’t have a name then think how people will interact with you.

<html>

<head>

<title> here, you will use title </title>

</head>

<body>

Welcome at SharpLesson.

</body>

</html>

Use of Script in Head tag

Script is used to define a client side script and let us understand it with an example.

<html>
<head>
<title>Page Title</title>
<script>
function myScript() {
document.getElementById("try").innerHTML ="I am using script!";
}
</script>
</head>
<body>
<h1>Script Testing</h1>
<p id="Try">When you will click button, I will change.</p>

<button type="button" onclick="myScript()">Check it</button>
</body>
</html>

In the above example, we are using a script and it wil write, I am using a script! When you will click the button check me. Do not worry we will discuss scripts in more detail, here just understand how we will use script in head tag.

Use of Style in Head tag

<html>

</head>

<title>Page Title</title>

<style>

body {background-color:red;}

</style>

</head>

<body>

<h1>We are using style in Head tag</h1>

<p> I am expecting Red color</p>

</body>

 </html>

Use of Meta tag in Head tag

We use meta tags to specify page description, can use keywords, author, etc. These information is used by browsers, search engines and other web services. For example,

  • The Browser will use meta data to display content.
  • Search engines will use keywords.

Let us understand the meta elements in head tag with an example.

<html>

<head>

<meta name="description" content=" I am learning Meta tags uses">

<meta name="keywords" content="Meta tag, meta, information meta">

<meta name="author" content="SharpLesson">

<meta charset="UTF-8">

</head>

<body>

<p>Meta tag is good for you to generate traffic.</p>

</body>

</html>

You just saw, how we can use elements in the head part of the html. We left a link, base and noscript for you to practice.

Important Note: If you are using Html5, then you can use title, style, script and other head elements without using head tag.

For example:

<html>

<title> Welcome to SharpLesson </title>

<body></body>

</html>

Conclusion

We learned what is head tag and its uses, if you want to become a web developer then do practice html elements. If you have any doubt or want to go for html solution, then do write to us: sharplesson[at]yahoo.com


What next? Next we will learn title tag and its importance.


If you liked our content on head tag, then share or like it on Facebook or you can tweet as well. Because we believe sharing is humanity and that is what we are doing.