Whitespace – HTML

Summary

HTML code:

<!-- 
The following 3 paragraph elements will be rendered the same way in the browser 
-->
<p>A sample paragraph in HTML.</p>

<p>A    sample    paragraph    in    HTML.</p>

<p>A
  sample
  paragraph
  in
  HTML.</p>

Details

As you can see in the comment in the example above, the three paragraph elements will all be rendered the same way, even though the second and third elements have extra space (you can confirm this by viewing the demo below). To be more specific, the words in the second paragraph element are separated by 4 spaces, and the words in the third paragraph element are separated by line breaks.

The browser will also ignore any extra spacing put between elements, as in the example below:

<h1>Main Title</h1>



<p>Sample paragraph text.</p>

Those two elements will be displayed in the browser on separate lines (which is normal for h1 and p elements), but there won’t be any extra space between them. Because of this fact, you can use extra line breaks to separate sections of your code and increase readability without affecting the way the output looks in the browser. If you do want to change the spacing between elements when they’re rendered in the browser, you should use CSS.

Demo

References

Getting started with HTML on MDN