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
Exercises
Recreate the code snippet in the Demo section by typing out the code in your index.html file.
References
Getting started with HTML on MDN