What is the advantage of collapsing white space ?

Last Updated : 21 Oct, 2021

White space refers to empty or blank values in the code which the browser reads and renders. Html has a special feature of collapsing these white spaces. If you put extra/consecutive white spaces or newlines in the code it will regard it as one white space this is known as collapsing of white spaces. In this article, we will discuss the advantages of collapsing white space in HTML.

Advantages of collapsing white spaces :

While you are writing the HTML for your web page you want the code to be more understandable/readable to the users.
Collapsing white spaces decreases the transmission time between the server and the client because collapsing features remove unnecessary bytes that are occupied by the white spaces.
By mistake, if you leave extra white space, the browser will ignore it and display the UI perfectly.

Example 1: The following example shows the basic example for collapsing white space. The h1 tag contains a lot of space between the short form and the full form. If you run this code in the browser you will see the following output. All the white space in between the two has been converted into a single white space.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
</head> 
<body>  
    <h1>Welcome to GFG.              GeeksforGeeks.</h1> 
</body> 
</html> 

Output:

Collapsed_White_Space

Example 2: The following example shows a 2d array of Integers type in code as a structure with each row in a different line. If you will see the output it will come in one line with all the white spaces collapsed.

HTML

<!DOCTYPE html> 
<html> 
<body> 
    <h1>Example of a 2 D Array of Integers :  
            [ 
            [1,2,3,4,5], 
            [6,7,8,9,10] 
            ]    
    </h1> 
</body> 
</html> 