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.
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>