Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

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

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

Lesson tags: Open Lesson
Back to: HTML Reference > HTML Syntax