HTML Head



The HTML <head> element is a container for the following elements: <title><style><meta><link><script>, and <base>.

Most of the metadata is not displayed in the browser (although the title usually appears in the browser's title bar) but it can be useful for the functionality of the page.

Metadata typically defines the document title, character set, styles, scripts, and other meta information. This information is helpful for search engines as well as provides additional data for the HTML pages.


Example :

<html>
   
   <head>
      Document header tags
   </head>

   <body>
      Document body tags
   </body>
   
</html>

HTML <title> Element

The <title> element specifies the title of the document.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The title of the document may be used for different purposes. For example:

  • To display a title in the browser title bar and in the taskbar.
  • To provide a title for the page when it is added to favorites or bookmarked.
  • To displays a title for the page in search engine results.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>This is Title</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

HTML <style> Element

The <style> element is used to define style information for a single HTML page:


Example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>This is Title</title>
    <style>
      body {
        background-color: rgb(255, 221, 221);
      }
      h1 {
        color: red;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>This is First Heading</h1>
    <p>Hello World!</p>
  </body>
</html>

Output :


HTML <link> Element

The <link> element is generally used to load the CSS file for both internal and external files.


Example :

<link rel="stylesheet" href="style.css">

HTML <meta> Element

The element provides metadata about the HTML document. It is generally used to describe the page and important keyword on this page. Adding meta description and meta keyword help web browsers to search easily. Some common use of meta

Define the character set used:

<meta charset="UTF-8">

Define a description of your web page:

<meta name="description" content="CodeXtreame tutorial is a Free online tutorial.">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define the author of a page:

<meta name="author" content="Denny Rex">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="CodeXtreame tutorial is a Free online tutorial." />
    <meta name="keywords" content="HTML,CSS,JavaScript" />
    <meta name="author" content="Denny Rex" />
  </head>
  <body>
    <p>Page Content goes here.</p>
  </body>
</html>

HTML <base> Element

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into the base URL while locating for the given item.


Example :

<!DOCTYPE html>
<html>
<head>
   <title>This is Page Title</title>
   <base href="https://www.codextreame.com/">
</head>
<body>
   <p>This is Paragraph</p> 
</body>
</html>

HTML <script> Element

The <script> element is used to define client-side JavaScripts. such as JavaScript in HTML documents.


Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML script Tag Example</title>
    <base href="http://www.codextreame.com/" />

    <script type="text/JavaScript">
      function Hello() {
         alert("Hello, World");
      }
    </script>
  </head>

  <body>
    <input type="button" onclick="Hello();" name="ok" value="Click Here" />
  </body>
</html>

Output :