HTML - Header

HTML header is part of an HTML document used to contain meta-information about document such as title, character encoding, link to style and script and other meta data. The <head> tag is used to define header of a document.

HTML <head> tag is used as a container for metadata and placed after the html tag. Metadata which is basically data about data present in the head section.

This information provided in header elements are essential for the browsers to correctly render the page and for search engines and other services to understand the content of the page. It is not recommended to include other parts of documents details inside the head tag.

HTML Header Elements

Following are common tags used inside header of a document.

Elements	Description
<title>	Title tag is used to represent the webpage title.
<meta>	Specify metadata and additional important information about a document.
<base>	For every relative URL in the HTML document, Base tag defines an absolute (base) URL.
<style>	Style tag contains style information for an HTML document.
<link>	Specifies relationship between the current document and an external resource.
<script>	Script tag is used to embed Client Side Scripting.

Examples of HTML Header Elements

Following are some examples that shows usage of different header elements in HTML.

Specify title for HTML Document

The HTML <title> tag is used for specifying the title of the HTML document. The title must describe the content of the web page and its format should be text only. It appears in the title bar of browser’s tab.

Following is an example that shows how to give a title to an HTML document using the <title> tag. Run this code as a file to see title on top of your browser tab.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Title Tag Example</title>
</head>

<body>
   <p>
      Save this code (.html) and run in your 
      browser to see title of the document
   </p>
</body>

</html>

Add meta data for Document

The HTML <meta> tag is used to provide metadata about an HTML document. The metadata is nothing but additional information about the web page including page expiry, page author, list of keywords, page description and so forth. This information is further used for the purpose of search engine optimization. Remember, the metadata specified by the <meta> tag is not displayed on the web page, but it is machine-readable.

The following example describes a few of the important usages of <meta> tag inside an HTML document.

<!DOCTYPE html>
<html>

<head>
   <!-- Provide list of keywords -->
   <meta name="keywords" 
         content="C, PHP, Perl, Python">

   <!-- Provide description of the page -->
   <meta name="description" 
         content="HTML by TutorialsPoint">

   <!-- Author information -->
   <meta name="author" 
         content="Tutorials Point">

   <!-- Page content type -->
   <meta http-equiv="content-type" 
         content="text/html; charset=UTF-8">

   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" 
         content="30">

   <!-- Setting expiry time for page-->
   <meta http-equiv="expires" 
         content="Wed, 21 June 2006 14:25:27 GMT">

   <!-- Prevent bots from indexing page -->
   <meta name="robots" 
         content="noindex, nofollow">
</head>

<body>
   <p>  
      Describing the use of HTML meta tag
   </p>

</body>

</html>

Set Base Address for URL

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 base URL while locating for the given item. We are allowed to use only one base element in our HTML document. The most frequently used attributes of <base> tag are href and target.

In this example, all the given pages and images will be searched after prefixing the given URLs with base URL 'http://www.tutorialspoint.com/' directory.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Base Tag Example</title>
   <base href = "https://www.tutorialspoint.com" />
</head>

<body>
   <img src="/images/logo.png" 
        alt="Logo Image"/>
   <br> <br>

   <a href="/html/index.htm" 
      title="HTML Tutorial"/>
         HTML Tutorial
   </a>
   <br> <br>

   <a href="/css/index.htm" 
      title="CSS Tutorial"/>
         CSS Tutorial
   </a>

   <p>
      Instead of using full url, we reduced it 
      to "html/index.htm" because we mentioned 
      base url as "www.tutorialspoint.com"
   </p>
</body>

</html>

Link External Resources to HTML Document

In HTML, the <link> tag is used to specify relationships between the current webpage and another external resource. The source of external resources is placed inside the href attribute. The other attributes of <link> tag are rel, type, and media. It's most common use is to embed stylesheets into the HTML document.

Following is an example to link an external style sheet file available in CSS sub-directory within web root.

<!DOCTYPE html>
<html>

<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" 
         type="text/css" 
         href="/css/style.css">
</head>

<body>
  <p>
      This is an example of linking stylesheet 
      to the current HTML document.
   </p>
</body>

</html>

Adding Styles to HTML Document

The HTML <style> tag is used to specify styles either for the whole HTML document or for a particular element. Its most common attributes are title and media.

In the following example, we will see different styling methods for <p> and <div> tag.

<!DOCTYPE html>
<html>

<head>
   <style>
      /*Styles to every tags*/
      *{
         margin: 0px;
         padding: 10px;
      }  
      
      /*Style only applied to Body tag*/
      body{
         background-color: lightblue;
      }

      /*Styles applied to all div tags*/
      div{
         background-color: coral;
         border:5px solid;
      }

      /*Styles applied to 'myclass' class*/
      .myclass{
         border:5px solid;
      }
      
      /*Styles only applied to 'myid' id*/
      #myid{
         height:40px;
      }
   </style>
</head>

<body>
   <div></div>
   
   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <div id="myid">
      Height = 40 px
   </div>
   
</body>

</html>

Note: To learn about how Cascading Style Sheet works, Checkout our free CSS Tutorial.

Client Side Scripting in HTML

The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document. The script is an executable code that performs some action.

Following is an example where we are using script tag to define a simple JavaScript function. When the user clicks on the button an alert box will pop-up with a Hello, World message.

<!DOCTYPE html>
<html>

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

<body>
   <br>
   <input type="button" 
          onclick="Hello();" 
          value="Click Me"  />

</body>

</html>

Note: To learn about how JavaScript works, Checkout our free JavaScript Tutorial.

Print Page