Why do we use head tag in HTML Page?

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


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>


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>


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>

The text “Html Articles” is displayed after clicking the button “click here”.