Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 01 Sep, 2021
Geek Week

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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :