Home Discussions Write at Opengenus IQ
×

Search anything:

HEAD Tag in HTML

Binary Tree book by OpenGenus

Open-Source Internship opportunity by OpenGenus for programmers. Apply now.

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>
  1. <script> Tag

js

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

css

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

logo

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

—
HEAD Tag in HTML
Share this