How HTML Treats Blank Space in HTML Code

Here we are going to give you an illustration on how the blank space in Html is handled. The html handles the white spaces or sequential white spaces as a single space. To elaborate more let’s see the code below.

<!DOCTYPE html>

<!– this is the way to comment in an HTML document –>

<html>

<head>

<meta charset=”UTF-8″ />

<title>

HTML Document Structure

</title>

<link rel=”stylesheet” type=”text/css” HREF=”main.css” />

</head>

<body>

<p>This is first paragraph in this HTML Document Structure</p>

 

<p>

This is second paragraph in this HTML Document Structure

</p>

</body>

</html>

Output :

This is first paragraph in this HTML Document Structure

This is second paragraph in this HTML Document Structure

As you see the output of the above code we have got the two lines which are in the <p> tags. In the above code there are many blank spaces there. You can see from the top to the bottom and especially in the two paragraph tags there is a two line gap. But in the output we have gap of just one line. If we will increase the white spaces or the blank spaces in the code what will happen:

<p>This is first paragraph in this HTML Document Structure</p>

 

 

 

<p>

 

 

    This is second paragraph                in this HTML Document Structure

</p>

Output:

This is first paragraph in this HTML Document Structure

This is second paragraph in this HTML Document Structure

You can clearly see that the output is the same. So the white or blank spaces in an html page or document are handled by the html as a single blank space. The white space or blank space in between the <p> tag and the text is removed and considered as no space in between them. Remember it makes no distinction between the horizontal of vertical space. Whether they are new lines, tabs and spaces etc the will be considered as a single space or no space in some cases.

If you want to get the white spaces in the output you have to use <pre> or preformatted text tag to display the white space. See the code below for more clarification.

<p>This is first paragraph in this HTML Document Structure</p>

 

 

 

<pre>

 

 

    This is second paragraph               

 

           in this HTML

                               Document Structure

</pre>

Output:

This is first paragraph in this HTML Document Structure

This is second paragraph

 

in this HTML

Document Structure

As you see the white spaces or blank spaces are displayed and the font of the text is changed. Now the text after the first line is displayed in a fixed space font.

Comments