HEAD Tag in HTML

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

Reading time: 20 minutes | Coding time: 5 minutes

The <head>tag in HTML contains all the header elements. The <head> tag is written after the <html> tag and before the <body> tag. Any text written under the <head> tag is not shown on the webpage. The <head> tag is used to contain specific information about a webpage ,this is often referred to as metadata These are some the tags that are written under the <head> tag.

Syntax and Position of head tag:

<html>
   <head>
       <!-- // ... -->
   </head>
   <body>
       <!-- // ... -->
   </body>
</html>

The components that are included in head tag of HTML are:

title tag
script tag
style tag
metadata tag
base tag

1.<title> Tag.
This HTML Tag is used to display the title of webpage in the browser toolbar.

Sample Code

<!DOCTYPE html>
<html>

<head>
  <title>Insert Title of the webpage here</title>
</head>
</html>

<script> Tag

The <script> tag is used to declare a client-side script like JavaScript in an HTML document. This tag can include either the script itself or a link to an external file containing the scripts. The path to the external file is specified with src the attribute. This tag can be used many times in an HTML document.

Sample Code

<!DOCTYPE html>
<html>
  <head>
    <title>Insert the title of the document here</title>
  </head>
    <p id="test"></p>
    <script>
      document.getElementById("test").innerHTML = "Javascript Text";
    </script>
    </head>
    </html>

3.<style> Tag

An external CSS (Cascading Style Sheets) can be used to define the style for HTML Webpages by using this tag.

Sample Code

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="filename.css">
</head>
</html>

<metadata> Tag

Metadata is basically a data which contains informtion of other data. Metadata will not be displayed on the actual webpage but it is machine parsable. <meta>tag is always passed as value pairs.

In HTML 5 by using <meta> the web developer/designer can take control over the viewport(user's visible area of a webpage).

Sample Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Sughosh Durg">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="description" content="Intro to <head> Tag">
 </head>
</html>

<base> Tag

The <base> tag is used to specify a base URL, or an URL for relative links.
This means once the base URL is declared at the top of the page in header section , then all the subsequent relative links will use that URL as a starting point.

Sample Code

<!DOCTYPE html>
<html>

   <head>
      <title>Title of the webpage </title>
      <base href = "https://discourse.opengenus.org/t/internship-guidelines-at-opengenus/2335" />
   </head>

   <body>
      HTML: <img src = "/images/logo.png" />
   </body>

</html>

With this, you have the complete knowledge of using head tag in your HTML web pages. Enjoy.