Explain the significance of <head> and <body> tag in HTML

Last Updated : 01 Sep, 2021

The HTML <head> and <body> tags are the two most commonly used tags in HTML. It is very rare to find an industry-level website that does not use the <head> and <body> tag in its pages. In this article, we are going to learn the significance of these two tags in an HTML document.

Significance of HTML <head> tag: The head tag in HTML is used to contain the metadata or information related to the document. It holds some of the most important tags like <title> , <meta> , and <link>.

From browser perspective:

In HTML 5 it is not mandatory to include a <head> tag inside the HTML document but in previous versions(4.0.1) it was mandatory to include it.
The tags like <title>, <meta> or <link> which are generally contained inside head will also work fine without the <head> tag or outside the <head> tag.

From a development perspective:

From the developer’s perspective, it is good to include the <head> tag inside the document because this syntax is widely used and it also gives a good structure to the document. Later this will help us to interact with the DOM elements in a structured way.

Significance of HTML <body> tag: The HTML body tag is the last child of the <html> tag. It is used to contain the main content of the HTML document. It holds everything from the heading, paragraphs to the unique div containers reside inside the <body> tag.

From browser perspective:

In HTML 5 it is not mandatory to include a <body> tag inside the HTML document but in previous versions(4.0.1) it was mandatory to include it.
The tags like <div>, <p> or <a> which are generally contained inside body will also work fine without the <body> tag or outside the <body> tag.
Despite being not mandatory, the <body> tag have some attributes like ‘background’, ‘bgcolor’ , ‘a’ , ‘link’ etc.

From a development perspective: From the developer’s perspective, it is good to include the <body> tag inside the document. This syntax is widely used and it also gives a good structure to the document. Later this will help us to interact with the DOM elements in a structured way.

Example 1: The following code is without the <head> and <body> tag.

HTML

<!DOCTYPE html> 
<html> 
    <p> 
        Significance of 'head' and 'body'  
        tag in HTML : Geeksforgeeks 
    </p> 
  
    <title>Tutorial</title> 
</html>

Output:

Without head and body tags

Example 2: The following code adds the <head> and <body> tag to the document. The output in the last will be the same even if <head> and<body> tags are included but it gives a better structure to the code and a better perspective of understanding.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Tutorial</title> 
</head> 
  
<body> 
    <p> 
        Significance of 'head' and 'body' 
        tag in HTML : Geeksforgeeks 
    </p> 
</body> 
  
</html> 

Output:

With the <head> and <body> tags

As we can see clearly that the output has not changed. But the code became easily understandable for us as the convention is followed properly.

Example 3: The following code uses the attributes of the <body> tag. In this example, we are going to use the ‘bgcolor‘ attribute of the <body> tag. It will change the background color of the entire document. Without the <body> tag, we are going to lose more such attributes like <alink>, <link>, etc.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Tutorial</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
  
<body bgcolor="black"> 
    <h1> 
        Significance of 'head' and 'body'  
        tag in HTML : Geeksforgeeks 
    </h1> 
</body> 
  
</html> 