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

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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript