Why do we use head tag in HTML Page?

HTML Web Development Front End Technology

The <head> tag is a container for all the head elements in an HTML page. We use <head>…</head> tag to add it to HTML page. head tag contains the title of the document, styles, scripts, and other HTML elements.

The <head> element is a container for metadata-data about data and is placed between the <html>…</html> tag.

The following elements can go inside the <head> element −

<title> − Use in every HTML page defines the title of the content.
<style> − Used to apply a simple style to HTML document
<base> − Specify a default URL and a default target for all links on a page.
<link> − Defines the relationship between the current document and an external resource.
<meta> − Defines metadata about an HTML document, typically used to specify a character set, page description, keywords, author of the document, and viewport settings.
<script> − Used to embed a client-side script (JavaScript), it points to an external script file through the src attribute.
<noscript> − Defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script. The <noscript> element can be used in both <head> and <body>.

Example

Following is the example program with a title tag inside the head tag.


<!DOCTYPE html>
<html>
<head>
   <title>HTML Articles-title of the document</title>
</head>
<body>
</body>
</html>

Example

We used style tag inside the head tag in the following example program.


<html>
<head>
   <style>
      h1 {color:aquamarine; background: #232323}
   </style>
</head>
<body>
   <h1>HTML Articles</h1>
</body>
</html>

Example

We used script tag inside the head tag in the following example program.


<!DOCTYPE html>
<html>
<head>
   <button onclick="myFunction()">Click here</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         document.getElementById("demo").innerHTML = "HTML Articles";
      }
   </script>
</head>
</html>